work for #7178 Dropdown (Standalone and Within Matrices) - Add an opt…

…ion to fully display long choice texts (#7235) Co-authored-by: OlgaLarina <olga.larina.dev@gmail.com>
surveyjs · Oct 26, 2023 · adad851 · adad851
1 parent 11de907
commit adad851
Show file tree

Hide file tree

Showing 13 changed files with 29 additions and 26 deletions.
diff --git a/packages/survey-angular-ui/src/components/list/list-item.component.html b/packages/survey-angular-ui/src/components/list/list-item.component.html
@@ -3,7 +3,7 @@
     <ng-container *ngIf="model.needSeparator">
     <div [class]="listModel.cssClasses.itemSeparator"></div>
     </ng-container>
-    <div [class]="listModel.cssClasses.itemBody" [style.paddingInlineStart]="paddingLeft">
+    <div [class]="listModel.cssClasses.itemBody" [style.paddingInlineStart]="paddingLeft" [attr.title]="model.locTitle.calculatedText">
     <ng-container *ngIf="!model.component">
       <svg *ngIf="model.iconName" [class]="listModel.cssClasses.itemIcon" [iconName]="model.iconName" [size]="model.iconSize"
         sv-ng-svg-icon></svg>

diff --git a/packages/survey-vue3-ui/src/components/list/ListItem.vue b/packages/survey-vue3-ui/src/components/list/ListItem.vue
@@ -18,6 +18,7 @@
     <div
       :style="{ paddingInlineStart: model.getItemIndent(item) }"
       v-bind:class="model.cssClasses.itemBody"
+      :title="item.locTitle.calculatedText"
     >
       <sv-svg-icon
         v-if="item.iconName && !item.component"

diff --git a/src/knockout/components/list/list-item.html b/src/knockout/components/list/list-item.html
@@ -3,7 +3,7 @@
 data-bind="css: $data.model.getItemClass($data.item), attr: { id: $data.item.elementId, 'aria-selected': $data.model.isItemSelected($data.item) ? 'true' : 'false' }, click: itemClick, key2click, visible: $data.model.isItemVisible($data.item), event: { pointerdown: function (model, event) { $data.model.onPointerDown(event, $data.item); } }">  <!-- ko if: $data.item.needSeparator -->
   <div data-bind="css: $data.model.cssClasses.itemSeparator"></div>
   <!-- /ko -->
-  <div data-bind="style: { paddingInlineStart: $data.model.getItemIndent($data.item) }, css: $data.model.cssClasses.itemBody">
+  <div data-bind="style: { paddingInlineStart: $data.model.getItemIndent($data.item) }, css: $data.model.cssClasses.itemBody, attr: { title: $data.item.locTitle.calculatedText }">
   <!-- ko ifnot: $data.item.component -->
   <!-- ko if: $data.item.iconName -->
   <!-- ko component: { name: "sv-svg-icon", params: { iconName: $data.item.iconName, size: $data.item.iconSize, css: $data.model.cssClasses.itemIcon } }-->

diff --git a/src/react/components/list/list-item.tsx b/src/react/components/list/list-item.tsx
@@ -56,6 +56,7 @@ export class ListItem extends SurveyElementBase<IListItemProps, any> {
         <div
           style={contentWrapStyle}
           className={this.model.cssClasses.itemBody}
+          title={this.item.locTitle.calculatedText}
         >
           {content}
         </div>;

diff --git a/src/vue/components/list/list-item.vue b/src/vue/components/list/list-item.vue
@@ -18,6 +18,7 @@
     <div
       :style="{ paddingInlineStart: model.getItemIndent(item) }"
       v-bind:class="model.cssClasses.itemBody"
+      :title="item.locTitle.calculatedText"
     >
       <sv-svg-icon
         v-if="item.iconName && !item.component"

diff --git a/tests/markup/snapshots/dropdown-aria-expanded.snap.html b/tests/markup/snapshots/dropdown-aria-expanded.snap.html
@@ -25,17 +25,17 @@
 										</div>
 										<ul class="sv-list" id="sq_100i_list" role="listbox">
 											<li aria-selected="false" class="sv-list__item" id="sq_100i_listitem1" role="option" tabindex="0">
-												<div class="sv-list__item-body" style="padding-inline-start:16px;">
+												<div class="sv-list__item-body" style="padding-inline-start:16px;" title="item1">
 													<span class="sv-string-viewer">item1</span>
 												</div>
 											</li>
 											<li aria-selected="false" class="sv-list__item" id="sq_100i_listitem2" role="option" tabindex="0">
-												<div class="sv-list__item-body" style="padding-inline-start:16px;">
+												<div class="sv-list__item-body" style="padding-inline-start:16px;" title="item2">
 													<span class="sv-string-viewer">item2</span>
 												</div>
 											</li>
 											<li aria-selected="false" class="sv-list__item" id="sq_100i_listitem3" role="option" tabindex="0">
-												<div class="sv-list__item-body" style="padding-inline-start:16px;">
+												<div class="sv-list__item-body" style="padding-inline-start:16px;" title="item3">
 													<span class="sv-string-viewer">item3</span>
 												</div>
 											</li>

diff --git a/tests/markup/snapshots/dropdown-input-string.snap.html b/tests/markup/snapshots/dropdown-input-string.snap.html
@@ -32,17 +32,17 @@
 										</div>
 										<ul class="sv-list sv-list--filtering" role="listbox">
 											<li aria-selected="false" class="sv-list__item sv-list__item--focused" role="option" tabindex="0">
-												<div class="sv-list__item-body" style="padding-inline-start:16px;">
+												<div class="sv-list__item-body" style="padding-inline-start:16px;" title="Ford">
 													<span class="sv-string-viewer">Ford</span>
 												</div>
 											</li>
 											<li aria-selected="false" class="sv-list__item" role="option" style="display:none;" tabindex="0">
-												<div class="sv-list__item-body" style="padding-inline-start:16px;">
+												<div class="sv-list__item-body" style="padding-inline-start:16px;" title="Vauxhall">
 													<span class="sv-string-viewer">Vauxhall</span>
 												</div>
 											</li>
 											<li aria-selected="false" class="sv-list__item" role="option" tabindex="0">
-												<div class="sv-list__item-body" style="padding-inline-start:16px;">
+												<div class="sv-list__item-body" style="padding-inline-start:16px;" title="Volkswagen">
 													<span class="sv-string-viewer">Volkswagen</span>
 												</div>
 											</li>

diff --git a/tests/markup/snapshots/list-component.snap.html b/tests/markup/snapshots/list-component.snap.html
@@ -8,17 +8,17 @@
 					</div>
 					<ul class="sv-list" id="sq_100i_list" role="listbox">
 						<li aria-selected="false" class="sv-list__item" id="sq_100i_listitem1" role="option" tabindex="0">
-							<div class="sv-list__item-body" style="padding-inline-start: 16px;">
+							<div class="sv-list__item-body" style="padding-inline-start:16px;" title="item1">
 								<span class="sv-string-viewer">item1</span>
 							</div>
 						</li>
 						<li aria-selected="false" class="sv-list__item" id="sq_100i_listitem2" role="option" tabindex="0">
-							<div class="sv-list__item-body" style="padding-inline-start: 16px;">
+							<div class="sv-list__item-body" style="padding-inline-start:16px;" title="item2">
 								<span class="sv-string-viewer">item2</span>
 							</div>
 						</li>
 						<li aria-selected="false" class="sv-list__item" id="sq_100i_listitem3" role="option" tabindex="0">
-							<div class="sv-list__item-body" style="padding-inline-start: 16px;">
+							<div class="sv-list__item-body" style="padding-inline-start:16px;" title="item3">
 								<span class="sv-string-viewer">item3</span>
 							</div>
 						</li>

diff --git a/tests/markup/snapshots/tagbox-mobile.snap.html b/tests/markup/snapshots/tagbox-mobile.snap.html
@@ -38,17 +38,17 @@
 										</div>
 										<ul class="sv-list" role="listbox">
 											<li aria-selected="false" class="sv-list__item" role="option" tabindex="0">
-												<div class="sv-list__item-body" style="padding-inline-start:16px;">
+												<div class="sv-list__item-body" style="padding-inline-start:16px;" title="item1">
 													<span class="sv-string-viewer">item1</span>
 												</div>
 											</li>
 											<li aria-selected="false" class="sv-list__item" role="option" tabindex="0">
-												<div class="sv-list__item-body" style="padding-inline-start:16px;">
+												<div class="sv-list__item-body" style="padding-inline-start:16px;" title="item2">
 													<span class="sv-string-viewer">item2</span>
 												</div>
 											</li>
 											<li aria-selected="false" class="sv-list__item" role="option" tabindex="0">
-												<div class="sv-list__item-body" style="padding-inline-start:16px;">
+												<div class="sv-list__item-body" style="padding-inline-start:16px;" title="item3">
 													<span class="sv-string-viewer">item3</span>
 												</div>
 											</li>

diff --git a/tests/markup/snapshots/tagbox-selected.snap.html b/tests/markup/snapshots/tagbox-selected.snap.html
@@ -40,17 +40,17 @@
 										</div>
 										<ul class="sv-list" role="listbox">
 											<li aria-selected="true" class="sv-list__item sv-list__item--selected" role="option" tabindex="0">
-												<div class="sv-list__item-body" style="padding-inline-start:16px;">
+												<div class="sv-list__item-body" style="padding-inline-start:16px;" title="item1">
 													<span class="sv-string-viewer">item1</span>
 												</div>
 											</li>
 											<li aria-selected="false" class="sv-list__item" role="option" tabindex="0">
-												<div class="sv-list__item-body" style="padding-inline-start:16px;">
+												<div class="sv-list__item-body" style="padding-inline-start:16px;" title="item2">
 													<span class="sv-string-viewer">item2</span>
 												</div>
 											</li>
 											<li aria-selected="false" class="sv-list__item" role="option" tabindex="0">
-												<div class="sv-list__item-body" style="padding-inline-start:16px;">
+												<div class="sv-list__item-body" style="padding-inline-start:16px;" title="item3">
 													<span class="sv-string-viewer">item3</span>
 												</div>
 											</li>

diff --git a/tests/markup/snapshots/tagbox-without-clear-button.snap.html b/tests/markup/snapshots/tagbox-without-clear-button.snap.html
@@ -22,17 +22,17 @@
 										</div>
 										<ul class="sv-list" role="listbox">
 											<li aria-selected="false" class="sv-list__item" role="option" tabindex="0">
-												<div class="sv-list__item-body" style="padding-inline-start:16px;">
+												<div class="sv-list__item-body" style="padding-inline-start:16px;" title="item1">
 													<span class="sv-string-viewer">item1</span>
 												</div>
 											</li>
 											<li aria-selected="false" class="sv-list__item" role="option" tabindex="0">
-												<div class="sv-list__item-body" style="padding-inline-start:16px;">
+												<div class="sv-list__item-body" style="padding-inline-start:16px;" title="item2">
 													<span class="sv-string-viewer">item2</span>
 												</div>
 											</li>
 											<li aria-selected="false" class="sv-list__item" role="option" tabindex="0">
-												<div class="sv-list__item-body" style="padding-inline-start:16px;">
+												<div class="sv-list__item-body" style="padding-inline-start:16px;" title="item3">
 													<span class="sv-string-viewer">item3</span>
 												</div>
 											</li>

diff --git a/tests/markup/snapshots/tagbox-without-search.snap.html b/tests/markup/snapshots/tagbox-without-search.snap.html
@@ -29,17 +29,17 @@
 										</div>
 										<ul class="sv-list" role="listbox">
 											<li aria-selected="false" class="sv-list__item" role="option" tabindex="0">
-												<div class="sv-list__item-body" style="padding-inline-start:16px;">
+												<div class="sv-list__item-body" style="padding-inline-start:16px;" title="item1">
 													<span class="sv-string-viewer">item1</span>
 												</div>
 											</li>
 											<li aria-selected="false" class="sv-list__item" role="option" tabindex="0">
-												<div class="sv-list__item-body" style="padding-inline-start:16px;">
+												<div class="sv-list__item-body" style="padding-inline-start:16px;" title="item2">
 													<span class="sv-string-viewer">item2</span>
 												</div>
 											</li>
 											<li aria-selected="false" class="sv-list__item" role="option" tabindex="0">
-												<div class="sv-list__item-body" style="padding-inline-start:16px;">
+												<div class="sv-list__item-body" style="padding-inline-start:16px;" title="item3">
 													<span class="sv-string-viewer">item3</span>
 												</div>
 											</li>

diff --git a/tests/markup/snapshots/tagbox.snap.html b/tests/markup/snapshots/tagbox.snap.html
@@ -29,17 +29,17 @@
 										</div>
 										<ul class="sv-list" role="listbox">
 											<li aria-selected="false" class="sv-list__item" role="option" tabindex="0">
-												<div class="sv-list__item-body" style="padding-inline-start:16px;">
+												<div class="sv-list__item-body" style="padding-inline-start:16px;" title="item1">
 													<span class="sv-string-viewer">item1</span>
 												</div>
 											</li>
 											<li aria-selected="false" class="sv-list__item" role="option" tabindex="0">
-												<div class="sv-list__item-body" style="padding-inline-start:16px;">
+												<div class="sv-list__item-body" style="padding-inline-start:16px;" title="item2">
 													<span class="sv-string-viewer">item2</span>
 												</div>
 											</li>
 											<li aria-selected="false" class="sv-list__item" role="option" tabindex="0">
-												<div class="sv-list__item-body" style="padding-inline-start:16px;">
+												<div class="sv-list__item-body" style="padding-inline-start:16px;" title="item3">
 													<span class="sv-string-viewer">item3</span>
 												</div>
 											</li>