fix: show tooltip on hover long text (#1230)

* fix: show tooltip on hover text

Author: ChenCodes

src/components/contact-datalist-item/ContactDatalistItem.js

@@ -6,7 +6,7 @@ import DatalistItem from '../datalist-item';
 import './ContactDatalistItem.scss';
 
 type Props = {
-    name: React.Node,
+    name: ?string,
     subtitle?: React.Node,
 };
 

src/features/unified-share-modal/ContactsField.js

@@ -198,7 +198,7 @@ class ContactsField extends React.Component<Props, State> {
                 validator={validator}
             >
                 {contacts.map(({ email, text = null, id }) => (
-                    <ContactDatalistItem key={id} name={text} subtitle={email || groupLabel} />
+                    <ContactDatalistItem key={id} name={text} subtitle={email || groupLabel} title={text} />
                 ))}
             </PillSelectorDropdown>
         );

src/features/unified-share-modal/__tests__/__snapshots__/ContactsField-test.js.snap

@@ -101,41 +101,49 @@ exports[`features/unified-share-modal/ContactsField render should have scrollabl
     key="12345"
     name="X User"
     subtitle="x@example.com"
+    title="X User"
   />
   <ContactDatalistItem
     key="23456"
     name="Y User"
     subtitle="y@example.com"
+    title="Y User"
   />
   <ContactDatalistItem
     key="34567"
     name="Z User"
     subtitle="z@example.com"
+    title="Z User"
   />
   <ContactDatalistItem
     key="12"
     name="a b"
     subtitle="a@example.com"
+    title="a b"
   />
   <ContactDatalistItem
     key="13"
     name="a b"
     subtitle="b@example.com"
+    title="a b"
   />
   <ContactDatalistItem
     key="14"
     name="a c"
     subtitle="c@example.com"
+    title="a c"
   />
   <ContactDatalistItem
     key="14"
     name="a d"
     subtitle="d@example.com"
+    title="a d"
   />
   <ContactDatalistItem
     key="14"
     name="a e"
     subtitle="e@example.com"
+    title="a e"
   />
 </PillSelectorDropdown>
 `;