From 62024063d8c298e17eea54e77ec593ee01a2a63f Mon Sep 17 00:00:00 2001
From: emyarod <emyarod@users.noreply.github.com>
Date: Mon, 20 Jan 2020 17:57:37 -0600
Subject: [PATCH] fix(listbox): set default title attributes to item text
 (#5102)

---
 .../src/components/dropdown/dropdown.hbs      | 10 ++++----
 .../react/src/components/ComboBox/ComboBox.js |  1 +
 .../src/components/Dropdown/Dropdown-story.js | 25 +++++++++++++++----
 .../react/src/components/Dropdown/Dropdown.js |  1 +
 .../__snapshots__/Dropdown-test.js.snap       |  4 +++
 .../MultiSelect/FilterableMultiSelect.js      |  1 +
 .../src/components/MultiSelect/MultiSelect.js |  1 +
 7 files changed, 33 insertions(+), 10 deletions(-)

diff --git a/packages/components/src/components/dropdown/dropdown.hbs b/packages/components/src/components/dropdown/dropdown.hbs
index 71a7c4b29177..fa7cfaeed8d6 100644
--- a/packages/components/src/components/dropdown/dropdown.hbs
+++ b/packages/components/src/components/dropdown/dropdown.hbs
@@ -20,7 +20,7 @@
       </button>
       <ul class="{{@root.prefix}}--dropdown-list" id="{{default.idSuffix}}-menu" role="menu" tabindex="0" id="{{default.idSuffix}}-menu" aria-hidden="true" wh-menu-anchor="left" aria-labelledby="{{default.idSuffix}}-label">
         {{#each items as |item index|}}
-        <li data-option data-value="{{value}}" class="{{@root.prefix}}--dropdown-item">
+        <li data-option data-value="{{value}}" class="{{@root.prefix}}--dropdown-item" title="{{label}}">
           <a class="{{@root.prefix}}--dropdown-link" href="javascript:void(0)" tabindex="-1" role="menuitemradio" aria-checked="{{#if index}}false{{else}}true{{/if}}" id="{{../default.idSuffix}}-item{{@index}}">{{label}}</a>
         </li>
         {{/each}}
@@ -45,7 +45,7 @@
       </button>
       <ul class="{{@root.prefix}}--dropdown-list"  role="menu" tabindex="0" id="{{helper.idSuffix}}-menu" aria-hidden="true" wh-menu-anchor="left" aria-labelledby="{{helper.idSuffix}}-label">
         {{#each items as |item index|}}
-        <li data-option data-value="{{value}}" class="{{@root.prefix}}--dropdown-item">
+        <li data-option data-value="{{value}}" class="{{@root.prefix}}--dropdown-item" title="{{label}}">
           <a class="{{@root.prefix}}--dropdown-link" href="javascript:void(0)" tabindex="-1" role="menuitemradio" aria-checked="{{#if index}}false{{else}}true{{/if}}" id="{{../helper.idSuffix}}-item{{@index}}">{{label}}</a>
         </li>
         {{/each}}
@@ -74,7 +74,7 @@
       <!-- Note: remove `tabindex` from disabled dropdown lists -->
       <ul class="{{@root.prefix}}--dropdown-list" id="{{disabled.idSuffix}}-menu" role="menu" id="{{disabled.idSuffix}}-menu" aria-hidden="true" wh-menu-anchor="left" aria-labelledby="{{disabled.idSuffix}}-label">
         {{#each items as |item index|}}
-        <li data-option data-value="{{value}}" class="{{@root.prefix}}--dropdown-item">
+        <li data-option data-value="{{value}}" class="{{@root.prefix}}--dropdown-item" title="{{label}}">
           <a class="{{@root.prefix}}--dropdown-link" href="javascript:void(0)" tabindex="-1" role="menuitemradio" aria-checked="{{#if index}}false{{else}}true{{/if}}" id="{{../disabled.idSuffix}}-item{{@index}}">{{label}}</a>
         </li>
         {{/each}}
@@ -103,7 +103,7 @@
       </button>
       <ul class="{{@root.prefix}}--dropdown-list" id="{{invalid.idSuffix}}-menu" role="menu" tabindex="0" id="{{invalid.idSuffix}}-menu" aria-hidden="true" wh-menu-anchor="left" aria-labelledby="{{invalid.idSuffix}}-label">
         {{#each items as |item index|}}
-        <li data-option data-value="{{value}}" class="{{@root.prefix}}--dropdown-item">
+        <li data-option data-value="{{value}}" class="{{@root.prefix}}--dropdown-item" title="{{label}}">
           <a class="{{@root.prefix}}--dropdown-link" href="javascript:void(0)" tabindex="-1" role="menuitemradio" aria-checked="{{#if index}}false{{else}}true{{/if}}" id="{{../invalid.idSuffix}}-item{{@index}}">{{label}}</a>
         </li>
         {{/each}}
@@ -138,7 +138,7 @@
       </button>
       <ul class="{{@root.prefix}}--dropdown-list" id="{{default.idSuffix}}-menu" role="menu" tabindex="0" id="{{default.idSuffix}}-menu" aria-hidden="true" wh-menu-anchor="left" aria-labelledby="{{default.idSuffix}}-label">
         {{#each items as |item index|}}
-        <li data-option data-value="{{value}}" class="{{@root.prefix}}--dropdown-item">
+        <li data-option data-value="{{value}}" class="{{@root.prefix}}--dropdown-item" title="{{label}}">
           <a class="{{@root.prefix}}--dropdown-link" href="javascript:void(0)" tabindex="-1" role="menuitemradio" aria-checked="{{#if index}}false{{else}}true{{/if}}" id="{{../default.idSuffix}}-item{{@index}}">{{label}}</a>
           {{ carbon-icon 'Checkmark16' class=(add @root.prefix '--list-box__menu-item__selected-icon') aria-hidden="true" }}
         </li>
diff --git a/packages/react/src/components/ComboBox/ComboBox.js b/packages/react/src/components/ComboBox/ComboBox.js
index 32b9a4a4d105..5a2125c34a15 100644
--- a/packages/react/src/components/ComboBox/ComboBox.js
+++ b/packages/react/src/components/ComboBox/ComboBox.js
@@ -401,6 +401,7 @@ export default class ComboBox extends React.Component {
                           (selectedItem && selectedItem.id === item.id) ||
                           false
                         }
+                        title={itemToElement ? item.text : itemToString(item)}
                         {...itemProps}>
                         {itemToElement ? (
                           <ItemToElement key={itemProps.id} {...item} />
diff --git a/packages/react/src/components/Dropdown/Dropdown-story.js b/packages/react/src/components/Dropdown/Dropdown-story.js
index 73e3ec4a0234..7f2fd75dfb8c 100644
--- a/packages/react/src/components/Dropdown/Dropdown-story.js
+++ b/packages/react/src/components/Dropdown/Dropdown-story.js
@@ -30,9 +30,19 @@ const items = [
     id: 'option-4',
     text: 'Option 4',
   },
+  {
+    id: 'option-5',
+    text:
+      'Lorem, ipsum dolor sit amet consectetur adipisicing elit. Vitae, aliquam. Blanditiis quia nemo enim voluptatibus quos ducimus porro molestiae nesciunt error cumque quaerat, tempore vero unde eum aperiam eligendi repellendus.',
+  },
 ];
 
-const stringItems = ['Option 1', 'Option 2', 'Option 3'];
+const stringItems = [
+  'Option 1',
+  'Option 2',
+  'Option 3',
+  'Lorem, ipsum dolor sit amet consectetur adipisicing elit. Vitae, aliquam. Blanditiis quia nemo enim voluptatibus quos ducimus porro molestiae nesciunt error cumque quaerat, tempore vero unde eum aperiam eligendi repellendus.',
+];
 
 const types = {
   'Default (default)': 'default',
@@ -63,11 +73,16 @@ const props = () => ({
 });
 
 const itemToElement = item => {
-  const itemAsArray = item.text.split(' ');
+  const [first, ...rest] = item.text.split(' ');
   return (
-    <div>
-      <span>{itemAsArray[0]}</span>
-      <span style={{ color: 'blue' }}> {itemAsArray[1]}</span>
+    <div
+      style={{
+        textOverflow: 'ellipsis',
+        overflow: 'hidden',
+        whiteSpace: 'nowrap',
+      }}>
+      <span>{first}</span>
+      <span style={{ color: 'blue' }}> {rest.join(' ')}</span>
     </div>
   );
 };
diff --git a/packages/react/src/components/Dropdown/Dropdown.js b/packages/react/src/components/Dropdown/Dropdown.js
index 4aa16198ef79..ed153de296c5 100644
--- a/packages/react/src/components/Dropdown/Dropdown.js
+++ b/packages/react/src/components/Dropdown/Dropdown.js
@@ -300,6 +300,7 @@ export default class Dropdown extends React.Component {
                           isHighlighted={
                             highlightedIndex === index || selectedItem === item
                           }
+                          title={itemToElement ? item.text : itemToString(item)}
                           {...itemProps}>
                           {itemToElement ? (
                             <ItemToElement key={itemProps.id} {...item} />
diff --git a/packages/react/src/components/Dropdown/__snapshots__/Dropdown-test.js.snap b/packages/react/src/components/Dropdown/__snapshots__/Dropdown-test.js.snap
index cdaf7d6a866c..cbc72b10d8dd 100644
--- a/packages/react/src/components/Dropdown/__snapshots__/Dropdown-test.js.snap
+++ b/packages/react/src/components/Dropdown/__snapshots__/Dropdown-test.js.snap
@@ -689,6 +689,7 @@ exports[`Dropdown should render with strings as items 1`] = `
                 onClick={[Function]}
                 onMouseDown={[Function]}
                 onMouseMove={[Function]}
+                title="zar"
               >
                 <div
                   className="bx--list-box__menu-item"
@@ -696,6 +697,7 @@ exports[`Dropdown should render with strings as items 1`] = `
                   onClick={[Function]}
                   onMouseDown={[Function]}
                   onMouseMove={[Function]}
+                  title="zar"
                 >
                   <div
                     className="bx--list-box__menu-item__option"
@@ -712,6 +714,7 @@ exports[`Dropdown should render with strings as items 1`] = `
                 onClick={[Function]}
                 onMouseDown={[Function]}
                 onMouseMove={[Function]}
+                title="doz"
               >
                 <div
                   className="bx--list-box__menu-item"
@@ -719,6 +722,7 @@ exports[`Dropdown should render with strings as items 1`] = `
                   onClick={[Function]}
                   onMouseDown={[Function]}
                   onMouseMove={[Function]}
+                  title="doz"
                 >
                   <div
                     className="bx--list-box__menu-item__option"
diff --git a/packages/react/src/components/MultiSelect/FilterableMultiSelect.js b/packages/react/src/components/MultiSelect/FilterableMultiSelect.js
index edf94915dca4..b76c75f7b2cc 100644
--- a/packages/react/src/components/MultiSelect/FilterableMultiSelect.js
+++ b/packages/react/src/components/MultiSelect/FilterableMultiSelect.js
@@ -435,6 +435,7 @@ export default class FilterableMultiSelect extends React.Component {
                             key={itemProps.id}
                             isActive={isChecked}
                             isHighlighted={highlightedIndex === index}
+                            title={itemText}
                             {...itemProps}>
                             <Checkbox
                               id={itemProps.id}
diff --git a/packages/react/src/components/MultiSelect/MultiSelect.js b/packages/react/src/components/MultiSelect/MultiSelect.js
index e53b053c0f59..4ffe0103e390 100644
--- a/packages/react/src/components/MultiSelect/MultiSelect.js
+++ b/packages/react/src/components/MultiSelect/MultiSelect.js
@@ -379,6 +379,7 @@ export default class MultiSelect extends React.Component {
                             key={itemProps.id}
                             isActive={isChecked}
                             isHighlighted={highlightedIndex === index}
+                            title={itemText}
                             {...itemProps}>
                             <Checkbox
                               id={`${itemProps.id}__checkbox`}