Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

fix: incorrect display when value change from with label to without label #1029

Open
wants to merge 1 commit into
base: master
Choose a base branch
from
Open
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
12 changes: 3 additions & 9 deletions src/hooks/useCache.ts
Expand Up @@ -3,42 +3,36 @@ import type { RawValueType } from '../BaseSelect';
import type { DefaultOptionType, LabelInValueType } from '../Select';

/**
* Cache `value` related LabeledValue & options.
* Cache `options` related LabeledValue & options.
*/
export default (
labeledValues: LabelInValueType[],
valueOptions: Map<RawValueType, DefaultOptionType>,
): [LabelInValueType[], (val: RawValueType) => DefaultOptionType] => {
const cacheRef = React.useRef({
values: new Map<RawValueType, LabelInValueType>(),
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

这个不应该删掉,labelInValue 的时候需要 cache 住之前的 label。只有不设置 labelInValue 才应该清理掉。

options: new Map<RawValueType, DefaultOptionType>(),
});

const filledLabeledValues = React.useMemo(() => {
const { values: prevValueCache, options: prevOptionCache } = cacheRef.current;

const { options: prevOptionCache } = cacheRef.current;
// Fill label by cache
const patchedValues = labeledValues.map((item) => {
if (item.label === undefined) {
return {
...item,
label: prevValueCache.get(item.value)?.label,
label: prevOptionCache.get(item.value)?.label,
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

此处不一定取label, 需结合
image

};
}

return item;
});

// Refresh cache
const valueCache = new Map<RawValueType, LabelInValueType>();
const optionCache = new Map<RawValueType, DefaultOptionType>();

patchedValues.forEach((item) => {
valueCache.set(item.value, item);
optionCache.set(item.value, valueOptions.get(item.value) || prevOptionCache.get(item.value));
});

cacheRef.current.values = valueCache;
cacheRef.current.options = optionCache;

return patchedValues;
Expand Down
17 changes: 17 additions & 0 deletions tests/Select.test.tsx
Expand Up @@ -1885,6 +1885,23 @@ describe('Select.Basic', () => {
expect(findSelection(wrapper).text()).toEqual('903');
});

it('value should be used as label When value does not have a label attribute and historical options do not contain value', () => {
const wrapper = mount(<Select value={{value: 903, label: 'light'}} options={[]} />);
expect(findSelection(wrapper).text()).toEqual('light');

wrapper.setProps({ value: 903 });
expect(findSelection(wrapper).text()).toEqual('903');

wrapper.setProps({ options: [{ value: 903, label: 'Bamboo' }] });
expect(findSelection(wrapper).text()).toEqual('Bamboo');

wrapper.setProps({ value:{ value: 903, label: 'light' },options:[]});
expect(findSelection(wrapper).text()).toEqual('light');

wrapper.setProps({ value: 903, options:[]});
expect(findSelection(wrapper).text()).toEqual('Bamboo');
});

// https://github.com/ant-design/ant-design/issues/24747
// This can not test function called with jest spy, coverage only
it('mouse enter to refresh', () => {
Expand Down