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

react-component · Jun 22, 2021 · ad2dda0 · ad2dda0 · vercel · Jun 22, 2021
1 parent c314038
commit ad2dda0
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"