Skip to content

Commit

Permalink
fix: Select option should render title defaultly
Browse files Browse the repository at this point in the history 
close ant-design/ant-design#26717
  • Loading branch information
@afc163
afc163 committed Sep 14, 2020
1 parent ecc588d commit 94243fb
Show file tree
Hide file tree
Showing 5 changed files with 95 additions and 3 deletions.
15 changes: 12 additions & 3 deletions src/OptionList.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -313,17 +313,26 @@ const OptionList: React.RefForwardingComponent<
const iconVisible =
!menuItemSelectedIcon || typeof menuItemSelectedIcon === 'function' || selected;

const content = mergedLabel || value;
// https://github.com/ant-design/ant-design/issues/26717
let optionTitle =
typeof content === 'string' || typeof content === 'number'
? content.toString()
: undefined;
if (title !== undefined) {
optionTitle = title;
}

return (
<div
{...otherProps}
aria-selected={selected}
className={optionClassName}
title={title}
title={optionTitle}
onMouseMove={() => {
if (activeIndex === itemIndex || disabled) {
return;
}

setActive(itemIndex);
}}
onClick={() => {
Expand All @@ -333,7 +342,7 @@ const OptionList: React.RefForwardingComponent<
}}
style={style}
>
<div className={`${optionPrefixCls}-content`}>{mergedLabel || value}</div>
<div className={`${optionPrefixCls}-content`}>{content}</div>
{React.isValidElement(menuItemSelectedIcon) || selected}
{iconVisible && (
<TransBtn
Expand Down
70 changes: 70 additions & 0 deletions tests/OptionList.test.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -152,4 +152,74 @@ describe('OptionList', () => {
.prop('data-num'),
).toBe('123');
});

it('should render title defaultly', () => {
const wrapper = mount(
generateList({
options: [{ value: '1', label: 'my-label' }],
}),
);
expect(
wrapper
.find('.rc-select-item-option')
.first()
.prop('title'),
).toBe('my-label');
});

it('should render title', () => {
const wrapper = mount(
generateList({
options: [{ value: '1', label: 'my-label', title: 'title' }],
}),
);
expect(
wrapper
.find('.rc-select-item-option')
.first()
.prop('title'),
).toBe('title');
});

it('should not render title when title is empty string', () => {
const wrapper = mount(
generateList({
options: [{ value: '1', label: 'my-label', title: '' }],
}),
);
expect(
wrapper
.find('.rc-select-item-option')
.first()
.prop('title'),
).toBe('');
});

it('should render title from label when title is undefined', () => {
const wrapper = mount(
generateList({
options: [{ value: '1', label: 'my-label', title: undefined }],
}),
);
expect(
wrapper
.find('.rc-select-item-option')
.first()
.prop('title'),
).toBe('my-label');
});

it('should not render title defaultly when label is ReactNode', () => {
const wrapper = mount(
generateList({
options: [{ value: '1', label: <div>label</div> }],
}),
);
expect(
wrapper
.find('.rc-select-item-option')
.first()
.prop('title'),
).toBe(undefined);
});
});
2 changes: 2 additions & 0 deletions tests/__snapshots__/OptionList.test.tsx.snap
View file
Original file line number Diff line number Diff line change
Expand Up @@ -47,6 +47,7 @@ exports[`OptionList renders correctly 1`] = `
aria-label="value-1"
aria-selected="true"
class="rc-select-item rc-select-item-option rc-select-item-option-grouped rc-select-item-option-active rc-select-item-option-selected"
title="1"
>
<div
class="rc-select-item-option-content"
Expand Down Expand Up @@ -74,6 +75,7 @@ exports[`OptionList renders correctly 1`] = `
<div
aria-selected="false"
class="rc-select-item rc-select-item-option rc-select-item-option-grouped"
title="2"
>
<div
class="rc-select-item-option-content"
Expand Down
8 changes: 8 additions & 0 deletions tests/__snapshots__/Select.test.tsx.snap
View file
Original file line number Diff line number Diff line change
Expand Up @@ -72,6 +72,7 @@ exports[`Select.Basic does not filter when filterOption value is false 1`] = `
<div
aria-selected="false"
class="rc-select-item rc-select-item-option rc-select-item-option-active"
title="1"
>
<div
class="rc-select-item-option-content"
Expand All @@ -92,6 +93,7 @@ exports[`Select.Basic does not filter when filterOption value is false 1`] = `
<div
aria-selected="false"
class="rc-select-item rc-select-item-option"
title="2"
>
<div
class="rc-select-item-option-content"
Expand Down Expand Up @@ -566,6 +568,7 @@ exports[`Select.Basic render renders dropdown correctly 1`] = `
<div
aria-selected="false"
class="antd-item antd-item-option antd-item-option-grouped"
title="lucy"
>
<div
class="antd-item-option-content"
Expand All @@ -591,6 +594,7 @@ exports[`Select.Basic render renders dropdown correctly 1`] = `
<div
aria-selected="false"
class="antd-item antd-item-option antd-item-option-grouped"
title="yiminghe"
>
<div
class="antd-item-option-content"
Expand Down Expand Up @@ -777,6 +781,7 @@ exports[`Select.Basic should contain falsy children 1`] = `
<div
aria-selected="true"
class="rc-select-item rc-select-item-option rc-select-item-option-active rc-select-item-option-selected"
title="1"
>
<div
class="rc-select-item-option-content"
Expand All @@ -799,6 +804,7 @@ exports[`Select.Basic should contain falsy children 1`] = `
<div
aria-selected="false"
class="rc-select-item rc-select-item-option"
title="2"
>
<div
class="rc-select-item-option-content"
Expand Down Expand Up @@ -918,6 +924,7 @@ exports[`Select.Basic should render custom dropdown correctly 1`] = `
<div
aria-selected="false"
class="rc-select-item rc-select-item-option rc-select-item-option-active"
title="1"
>
<div
class="rc-select-item-option-content"
Expand All @@ -938,6 +945,7 @@ exports[`Select.Basic should render custom dropdown correctly 1`] = `
<div
aria-selected="false"
class="rc-select-item rc-select-item-option"
title="2"
>
<div
class="rc-select-item-option-content"
Expand Down
3 changes: 3 additions & 0 deletions tests/__snapshots__/Tags.test.tsx.snap
View file
Original file line number Diff line number Diff line change
Expand Up @@ -127,6 +127,7 @@ exports[`Select.Tags OptGroup renders correctly 1`] = `
<div
aria-selected="true"
class="rc-select-item rc-select-item-option rc-select-item-option-grouped rc-select-item-option-active rc-select-item-option-selected"
title="Jack"
>
<div
class="rc-select-item-option-content"
Expand Down Expand Up @@ -154,6 +155,7 @@ exports[`Select.Tags OptGroup renders correctly 1`] = `
<div
aria-selected="false"
class="rc-select-item rc-select-item-option rc-select-item-option-grouped"
title="yiminghe"
>
<div
class="rc-select-item-option-content"
Expand All @@ -174,6 +176,7 @@ exports[`Select.Tags OptGroup renders correctly 1`] = `
<div
aria-selected="true"
class="rc-select-item rc-select-item-option rc-select-item-option-selected"
title="foo"
>
<div
class="rc-select-item-option-content"
Expand Down

0 comments on commit 94243fb

Please sign in to comment.