feat: add title for tag in multiple mode (#636)

react-component · Jun 21, 2021 · e90a901 · e90a901
1 parent 318de43
commit e90a901
Show file tree

Hide file tree

Showing 4 changed files with 38 additions and 22 deletions.
diff --git a/src/Selector/MultipleSelector.tsx b/src/Selector/MultipleSelector.tsx
@@ -102,6 +102,11 @@ const SelectSelector: React.FC<SelectorProps> = (props) => {
         className={classNames(`${selectionPrefixCls}-item`, {
           [`${selectionPrefixCls}-item-disabled`]: itemDisabled,
         })}
+        title={
+          typeof content === 'string' || typeof content === 'number'
+            ? content.toString()
+            : undefined
+        }
       >
         <span className={`${selectionPrefixCls}-item-content`}>{content}</span>
         {closable && (

diff --git a/tests/Multiple.test.tsx b/tests/Multiple.test.tsx
@@ -262,10 +262,7 @@ describe('Select.Multiple', () => {
     );
 
     toggleOpen(wrapper);
-    wrapper
-      .find('div.rc-select-item-option')
-      .at(1)
-      .simulate('mouseMove');
+    wrapper.find('div.rc-select-item-option').at(1).simulate('mouseMove');
 
     wrapper.find('input').simulate('keyDown', { which: KeyCode.ENTER });
     expectOpen(wrapper);
@@ -283,16 +280,10 @@ describe('Select.Multiple', () => {
     );
 
     toggleOpen(wrapper);
-    wrapper
-      .find('div.rc-select-item-option')
-      .first()
-      .simulate('mousemove');
+    wrapper.find('div.rc-select-item-option').first().simulate('mousemove');
     wrapper.find('input').simulate('keyDown', { which: KeyCode.ENTER });
 
-    wrapper
-      .find('div.rc-select-item-option')
-      .first()
-      .simulate('mousemove');
+    wrapper.find('div.rc-select-item-option').first().simulate('mousemove');
     wrapper.find('input').simulate('keyDown', { which: KeyCode.ENTER });
 
     expect(wrapper.find('Selector').props().values).toEqual([]);
@@ -448,18 +439,24 @@ describe('Select.Multiple', () => {
     const wrapper = mount(
       <Select mode="multiple" options={[{ value: 'bamboo' }, { value: 'light' }]} tabIndex={0} />,
     );
-    expect(
-      wrapper
-        .find('.rc-select')
-        .getDOMNode()
-        .getAttribute('tabindex'),
-    ).toBeNull();
+    expect(wrapper.find('.rc-select').getDOMNode().getAttribute('tabindex')).toBeNull();
 
     expect(
-      wrapper
-        .find('input.rc-select-selection-search-input')
-        .getDOMNode()
-        .getAttribute('tabindex'),
+      wrapper.find('input.rc-select-selection-search-input').getDOMNode().getAttribute('tabindex'),
     ).toBe('0');
   });
+
+  it('should render title defaultly', () => {
+    const wrapper = mount(
+      <Select mode="multiple" options={[{ value: 'title' }]} value={['title']} />,
+    );
+    expect(wrapper.find('.rc-select-selection-item').first().prop('title')).toBe('title');
+  });
+
+  it('should not render title defaultly when label is ReactNode', () => {
+    const wrapper = mount(
+      <Select mode="multiple" options={[{ value: '1', label: <div>label</div> }]} value={['1']} />,
+    );
+    expect(wrapper.find('.rc-select-selection-item').first().prop('title')).toBe(undefined);
+  });
 });
diff --git a/tests/__snapshots__/Multiple.test.tsx.snap b/tests/__snapshots__/Multiple.test.tsx.snap
@@ -66,6 +66,7 @@ exports[`Select.Multiple render truncates tags by maxTagCount and show maxTagPla
       >
         <span
           class="rc-select-selection-item"
+          title="One"
         >
           <span
             class="rc-select-selection-item-content"
@@ -92,6 +93,7 @@ exports[`Select.Multiple render truncates tags by maxTagCount and show maxTagPla
       >
         <span
           class="rc-select-selection-item"
+          title="Two"
         >
           <span
             class="rc-select-selection-item-content"
@@ -181,6 +183,7 @@ exports[`Select.Multiple render truncates tags by maxTagCount and show maxTagPla
       >
         <span
           class="rc-select-selection-item"
+          title="One"
         >
           <span
             class="rc-select-selection-item-content"
@@ -207,6 +210,7 @@ exports[`Select.Multiple render truncates tags by maxTagCount and show maxTagPla
       >
         <span
           class="rc-select-selection-item"
+          title="Two"
         >
           <span
             class="rc-select-selection-item-content"
@@ -296,6 +300,7 @@ exports[`Select.Multiple render truncates values by maxTagTextLength 1`] = `
       >
         <span
           class="rc-select-selection-item"
+          title="On..."
         >
           <span
             class="rc-select-selection-item-content"
@@ -322,6 +327,7 @@ exports[`Select.Multiple render truncates values by maxTagTextLength 1`] = `
       >
         <span
           class="rc-select-selection-item"
+          title="Tw..."
         >
           <span
             class="rc-select-selection-item-content"

diff --git a/tests/__snapshots__/Tags.test.tsx.snap b/tests/__snapshots__/Tags.test.tsx.snap
@@ -17,6 +17,7 @@ exports[`Select.Tags OptGroup renders correctly 1`] = `
         >
           <span
             class="rc-select-selection-item"
+            title="Jack"
           >
             <span
               class="rc-select-selection-item-content"
@@ -43,6 +44,7 @@ exports[`Select.Tags OptGroup renders correctly 1`] = `
         >
           <span
             class="rc-select-selection-item"
+            title="foo"
           >
             <span
               class="rc-select-selection-item-content"
@@ -289,6 +291,7 @@ exports[`Select.Tags render truncates tags by maxTagCount and show maxTagPlaceho
       >
         <span
           class="rc-select-selection-item"
+          title="One"
         >
           <span
             class="rc-select-selection-item-content"
@@ -315,6 +318,7 @@ exports[`Select.Tags render truncates tags by maxTagCount and show maxTagPlaceho
       >
         <span
           class="rc-select-selection-item"
+          title="Two"
         >
           <span
             class="rc-select-selection-item-content"
@@ -401,6 +405,7 @@ exports[`Select.Tags render truncates tags by maxTagCount and show maxTagPlaceho
       >
         <span
           class="rc-select-selection-item"
+          title="One"
         >
           <span
             class="rc-select-selection-item-content"
@@ -427,6 +432,7 @@ exports[`Select.Tags render truncates tags by maxTagCount and show maxTagPlaceho
       >
         <span
           class="rc-select-selection-item"
+          title="Two"
         >
           <span
             class="rc-select-selection-item-content"
@@ -513,6 +519,7 @@ exports[`Select.Tags render truncates values by maxTagTextLength 1`] = `
       >
         <span
           class="rc-select-selection-item"
+          title="On..."
         >
           <span
             class="rc-select-selection-item-content"
@@ -539,6 +546,7 @@ exports[`Select.Tags render truncates values by maxTagTextLength 1`] = `
       >
         <span
           class="rc-select-selection-item"
+          title="Tw..."
         >
           <span
             class="rc-select-selection-item-content"