Skip to content

Commit e90a901

Browse files
nekocodenekocode
committed
feat: add title for tag in multiple mode (#636)
1 parent 318de43 commit e90a901

File tree

4 files changed

+38
-22
lines changed

4 files changed

+38
-22
lines changed

‎src/Selector/MultipleSelector.tsx‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -102,6 +102,11 @@ const SelectSelector: React.FC<SelectorProps> = (props) => {
102102
className={classNames(`${selectionPrefixCls}-item`, {
103103
[`${selectionPrefixCls}-item-disabled`]: itemDisabled,
104104
})}
105+
title={
106+
typeof content === 'string' || typeof content === 'number'
107+
? content.toString()
108+
: undefined
109+
}
105110
>
106111
<span className={`${selectionPrefixCls}-item-content`}>{content}</span>
107112
{closable && (

‎tests/Multiple.test.tsx‎

Lines changed: 19 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -262,10 +262,7 @@ describe('Select.Multiple', () => {
262262
);
263263

264264
toggleOpen(wrapper);
265-
wrapper
266-
.find('div.rc-select-item-option')
267-
.at(1)
268-
.simulate('mouseMove');
265+
wrapper.find('div.rc-select-item-option').at(1).simulate('mouseMove');
269266

270267
wrapper.find('input').simulate('keyDown', { which: KeyCode.ENTER });
271268
expectOpen(wrapper);
@@ -283,16 +280,10 @@ describe('Select.Multiple', () => {
283280
);
284281

285282
toggleOpen(wrapper);
286-
wrapper
287-
.find('div.rc-select-item-option')
288-
.first()
289-
.simulate('mousemove');
283+
wrapper.find('div.rc-select-item-option').first().simulate('mousemove');
290284
wrapper.find('input').simulate('keyDown', { which: KeyCode.ENTER });
291285

292-
wrapper
293-
.find('div.rc-select-item-option')
294-
.first()
295-
.simulate('mousemove');
286+
wrapper.find('div.rc-select-item-option').first().simulate('mousemove');
296287
wrapper.find('input').simulate('keyDown', { which: KeyCode.ENTER });
297288

298289
expect(wrapper.find('Selector').props().values).toEqual([]);
@@ -448,18 +439,24 @@ describe('Select.Multiple', () => {
448439
const wrapper = mount(
449440
<Select mode="multiple" options={[{ value: 'bamboo' }, { value: 'light' }]} tabIndex={0} />,
450441
);
451-
expect(
452-
wrapper
453-
.find('.rc-select')
454-
.getDOMNode()
455-
.getAttribute('tabindex'),
456-
).toBeNull();
442+
expect(wrapper.find('.rc-select').getDOMNode().getAttribute('tabindex')).toBeNull();
457443

458444
expect(
459-
wrapper
460-
.find('input.rc-select-selection-search-input')
461-
.getDOMNode()
462-
.getAttribute('tabindex'),
445+
wrapper.find('input.rc-select-selection-search-input').getDOMNode().getAttribute('tabindex'),
463446
).toBe('0');
464447
});
448+
449+
it('should render title defaultly', () => {
450+
const wrapper = mount(
451+
<Select mode="multiple" options={[{ value: 'title' }]} value={['title']} />,
452+
);
453+
expect(wrapper.find('.rc-select-selection-item').first().prop('title')).toBe('title');
454+
});
455+
456+
it('should not render title defaultly when label is ReactNode', () => {
457+
const wrapper = mount(
458+
<Select mode="multiple" options={[{ value: '1', label: <div>label</div> }]} value={['1']} />,
459+
);
460+
expect(wrapper.find('.rc-select-selection-item').first().prop('title')).toBe(undefined);
461+
});
465462
});

‎tests/__snapshots__/Multiple.test.tsx.snap‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -66,6 +66,7 @@ exports[`Select.Multiple render truncates tags by maxTagCount and show maxTagPla
6666
>
6767
<span
6868
class="rc-select-selection-item"
69+
title="One"
6970
>
7071
<span
7172
class="rc-select-selection-item-content"
@@ -92,6 +93,7 @@ exports[`Select.Multiple render truncates tags by maxTagCount and show maxTagPla
9293
>
9394
<span
9495
class="rc-select-selection-item"
96+
title="Two"
9597
>
9698
<span
9799
class="rc-select-selection-item-content"
@@ -181,6 +183,7 @@ exports[`Select.Multiple render truncates tags by maxTagCount and show maxTagPla
181183
>
182184
<span
183185
class="rc-select-selection-item"
186+
title="One"
184187
>
185188
<span
186189
class="rc-select-selection-item-content"
@@ -207,6 +210,7 @@ exports[`Select.Multiple render truncates tags by maxTagCount and show maxTagPla
207210
>
208211
<span
209212
class="rc-select-selection-item"
213+
title="Two"
210214
>
211215
<span
212216
class="rc-select-selection-item-content"
@@ -296,6 +300,7 @@ exports[`Select.Multiple render truncates values by maxTagTextLength 1`] = `
296300
>
297301
<span
298302
class="rc-select-selection-item"
303+
title="On..."
299304
>
300305
<span
301306
class="rc-select-selection-item-content"
@@ -322,6 +327,7 @@ exports[`Select.Multiple render truncates values by maxTagTextLength 1`] = `
322327
>
323328
<span
324329
class="rc-select-selection-item"
330+
title="Tw..."
325331
>
326332
<span
327333
class="rc-select-selection-item-content"

‎tests/__snapshots__/Tags.test.tsx.snap‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -17,6 +17,7 @@ exports[`Select.Tags OptGroup renders correctly 1`] = `
1717
>
1818
<span
1919
class="rc-select-selection-item"
20+
title="Jack"
2021
>
2122
<span
2223
class="rc-select-selection-item-content"
@@ -43,6 +44,7 @@ exports[`Select.Tags OptGroup renders correctly 1`] = `
4344
>
4445
<span
4546
class="rc-select-selection-item"
47+
title="foo"
4648
>
4749
<span
4850
class="rc-select-selection-item-content"
@@ -289,6 +291,7 @@ exports[`Select.Tags render truncates tags by maxTagCount and show maxTagPlaceho
289291
>
290292
<span
291293
class="rc-select-selection-item"
294+
title="One"
292295
>
293296
<span
294297
class="rc-select-selection-item-content"
@@ -315,6 +318,7 @@ exports[`Select.Tags render truncates tags by maxTagCount and show maxTagPlaceho
315318
>
316319
<span
317320
class="rc-select-selection-item"
321+
title="Two"
318322
>
319323
<span
320324
class="rc-select-selection-item-content"
@@ -401,6 +405,7 @@ exports[`Select.Tags render truncates tags by maxTagCount and show maxTagPlaceho
401405
>
402406
<span
403407
class="rc-select-selection-item"
408+
title="One"
404409
>
405410
<span
406411
class="rc-select-selection-item-content"
@@ -427,6 +432,7 @@ exports[`Select.Tags render truncates tags by maxTagCount and show maxTagPlaceho
427432
>
428433
<span
429434
class="rc-select-selection-item"
435+
title="Two"
430436
>
431437
<span
432438
class="rc-select-selection-item-content"
@@ -513,6 +519,7 @@ exports[`Select.Tags render truncates values by maxTagTextLength 1`] = `
513519
>
514520
<span
515521
class="rc-select-selection-item"
522+
title="On..."
516523
>
517524
<span
518525
class="rc-select-selection-item-content"
@@ -539,6 +546,7 @@ exports[`Select.Tags render truncates values by maxTagTextLength 1`] = `
539546
>
540547
<span
541548
class="rc-select-selection-item"
549+
title="Tw..."
542550
>
543551
<span
544552
class="rc-select-selection-item-content"

0 commit comments

Comments
 (0)