Skip to content

Commit 94243fb

Browse files
afc163afc163
committed
fix: Select option should render title defaultly
close ant-design/ant-design#26717
1 parent ecc588d commit 94243fb

File tree

5 files changed

+95
-3
lines changed

5 files changed

+95
-3
lines changed

‎src/OptionList.tsx‎

Lines changed: 12 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -313,17 +313,26 @@ const OptionList: React.RefForwardingComponent<
313313
const iconVisible =
314314
!menuItemSelectedIcon || typeof menuItemSelectedIcon === 'function' || selected;
315315

316+
const content = mergedLabel || value;
317+
// https://github.com/ant-design/ant-design/issues/26717
318+
let optionTitle =
319+
typeof content === 'string' || typeof content === 'number'
320+
? content.toString()
321+
: undefined;
322+
if (title !== undefined) {
323+
optionTitle = title;
324+
}
325+
316326
return (
317327
<div
318328
{...otherProps}
319329
aria-selected={selected}
320330
className={optionClassName}
321-
title={title}
331+
title={optionTitle}
322332
onMouseMove={() => {
323333
if (activeIndex === itemIndex || disabled) {
324334
return;
325335
}
326-
327336
setActive(itemIndex);
328337
}}
329338
onClick={() => {
@@ -333,7 +342,7 @@ const OptionList: React.RefForwardingComponent<
333342
}}
334343
style={style}
335344
>
336-
<div className={`${optionPrefixCls}-content`}>{mergedLabel || value}</div>
345+
<div className={`${optionPrefixCls}-content`}>{content}</div>
337346
{React.isValidElement(menuItemSelectedIcon) || selected}
338347
{iconVisible && (
339348
<TransBtn

‎tests/OptionList.test.tsx‎

Lines changed: 70 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -152,4 +152,74 @@ describe('OptionList', () => {
152152
.prop('data-num'),
153153
).toBe('123');
154154
});
155+
156+
it('should render title defaultly', () => {
157+
const wrapper = mount(
158+
generateList({
159+
options: [{ value: '1', label: 'my-label' }],
160+
}),
161+
);
162+
expect(
163+
wrapper
164+
.find('.rc-select-item-option')
165+
.first()
166+
.prop('title'),
167+
).toBe('my-label');
168+
});
169+
170+
it('should render title', () => {
171+
const wrapper = mount(
172+
generateList({
173+
options: [{ value: '1', label: 'my-label', title: 'title' }],
174+
}),
175+
);
176+
expect(
177+
wrapper
178+
.find('.rc-select-item-option')
179+
.first()
180+
.prop('title'),
181+
).toBe('title');
182+
});
183+
184+
it('should not render title when title is empty string', () => {
185+
const wrapper = mount(
186+
generateList({
187+
options: [{ value: '1', label: 'my-label', title: '' }],
188+
}),
189+
);
190+
expect(
191+
wrapper
192+
.find('.rc-select-item-option')
193+
.first()
194+
.prop('title'),
195+
).toBe('');
196+
});
197+
198+
it('should render title from label when title is undefined', () => {
199+
const wrapper = mount(
200+
generateList({
201+
options: [{ value: '1', label: 'my-label', title: undefined }],
202+
}),
203+
);
204+
expect(
205+
wrapper
206+
.find('.rc-select-item-option')
207+
.first()
208+
.prop('title'),
209+
).toBe('my-label');
210+
});
211+
212+
it('should not render title defaultly when label is ReactNode', () => {
213+
const wrapper = mount(
214+
generateList({
215+
options: [{ value: '1', label: <div>label</div> }],
216+
}),
217+
);
218+
expect(
219+
wrapper
220+
.find('.rc-select-item-option')
221+
.first()
222+
.prop('title'),
223+
).toBe(undefined);
224+
});
155225
});

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

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -47,6 +47,7 @@ exports[`OptionList renders correctly 1`] = `
4747
aria-label="value-1"
4848
aria-selected="true"
4949
class="rc-select-item rc-select-item-option rc-select-item-option-grouped rc-select-item-option-active rc-select-item-option-selected"
50+
title="1"
5051
>
5152
<div
5253
class="rc-select-item-option-content"
@@ -74,6 +75,7 @@ exports[`OptionList renders correctly 1`] = `
7475
<div
7576
aria-selected="false"
7677
class="rc-select-item rc-select-item-option rc-select-item-option-grouped"
78+
title="2"
7779
>
7880
<div
7981
class="rc-select-item-option-content"

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

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -72,6 +72,7 @@ exports[`Select.Basic does not filter when filterOption value is false 1`] = `
7272
<div
7373
aria-selected="false"
7474
class="rc-select-item rc-select-item-option rc-select-item-option-active"
75+
title="1"
7576
>
7677
<div
7778
class="rc-select-item-option-content"
@@ -92,6 +93,7 @@ exports[`Select.Basic does not filter when filterOption value is false 1`] = `
9293
<div
9394
aria-selected="false"
9495
class="rc-select-item rc-select-item-option"
96+
title="2"
9597
>
9698
<div
9799
class="rc-select-item-option-content"
@@ -566,6 +568,7 @@ exports[`Select.Basic render renders dropdown correctly 1`] = `
566568
<div
567569
aria-selected="false"
568570
class="antd-item antd-item-option antd-item-option-grouped"
571+
title="lucy"
569572
>
570573
<div
571574
class="antd-item-option-content"
@@ -591,6 +594,7 @@ exports[`Select.Basic render renders dropdown correctly 1`] = `
591594
<div
592595
aria-selected="false"
593596
class="antd-item antd-item-option antd-item-option-grouped"
597+
title="yiminghe"
594598
>
595599
<div
596600
class="antd-item-option-content"
@@ -777,6 +781,7 @@ exports[`Select.Basic should contain falsy children 1`] = `
777781
<div
778782
aria-selected="true"
779783
class="rc-select-item rc-select-item-option rc-select-item-option-active rc-select-item-option-selected"
784+
title="1"
780785
>
781786
<div
782787
class="rc-select-item-option-content"
@@ -799,6 +804,7 @@ exports[`Select.Basic should contain falsy children 1`] = `
799804
<div
800805
aria-selected="false"
801806
class="rc-select-item rc-select-item-option"
807+
title="2"
802808
>
803809
<div
804810
class="rc-select-item-option-content"
@@ -918,6 +924,7 @@ exports[`Select.Basic should render custom dropdown correctly 1`] = `
918924
<div
919925
aria-selected="false"
920926
class="rc-select-item rc-select-item-option rc-select-item-option-active"
927+
title="1"
921928
>
922929
<div
923930
class="rc-select-item-option-content"
@@ -938,6 +945,7 @@ exports[`Select.Basic should render custom dropdown correctly 1`] = `
938945
<div
939946
aria-selected="false"
940947
class="rc-select-item rc-select-item-option"
948+
title="2"
941949
>
942950
<div
943951
class="rc-select-item-option-content"

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

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -127,6 +127,7 @@ exports[`Select.Tags OptGroup renders correctly 1`] = `
127127
<div
128128
aria-selected="true"
129129
class="rc-select-item rc-select-item-option rc-select-item-option-grouped rc-select-item-option-active rc-select-item-option-selected"
130+
title="Jack"
130131
>
131132
<div
132133
class="rc-select-item-option-content"
@@ -154,6 +155,7 @@ exports[`Select.Tags OptGroup renders correctly 1`] = `
154155
<div
155156
aria-selected="false"
156157
class="rc-select-item rc-select-item-option rc-select-item-option-grouped"
158+
title="yiminghe"
157159
>
158160
<div
159161
class="rc-select-item-option-content"
@@ -174,6 +176,7 @@ exports[`Select.Tags OptGroup renders correctly 1`] = `
174176
<div
175177
aria-selected="true"
176178
class="rc-select-item rc-select-item-option rc-select-item-option-selected"
179+
title="foo"
177180
>
178181
<div
179182
class="rc-select-item-option-content"

0 commit comments

Comments
 (0)