Skip to content

fix: improve to not treat as a valid option when the value is null. #564

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.

Sign up for GitHub

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

Merged
merged 4 commits into from
Aug 28, 2024
Merged

fix: improve to not treat as a valid option when the value is null. #564

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
302e06e
fix: improve to not treat as a valid option when the value is null.
Wxh16144 Aug 27, 2024
e5223d5
Revert "​"
Wxh16144 Aug 27, 2024
0dd12df
​
Oct 1, 2049
2b8f4c7
chore: add unit test
Wxh16144 Aug 27, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion src/TreeSelect.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -390,7 +390,7 @@ const TreeSelect = React.forwardRef<BaseSelectRef, TreeSelectProps>((props, ref)

// =========================== Values ===========================
const rawMixedLabeledValues = React.useMemo(
() => toLabeledValues(internalValue),
() => toLabeledValues(internalValue === null ? [] : internalValue),
[toLabeledValues, internalValue],
);

Expand Down
38 changes: 38 additions & 0 deletions tests/Select.multiple.spec.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -310,4 +310,42 @@ describe('TreeSelect.multiple', () => {
).map(ele => ele.textContent);
expect(values).toEqual(['child1', 'child2', 'parent']);
});

// https://github.com/ant-design/ant-design/issues/50578#issuecomment-2312130715
it('should not omit value when value is null', () => {
const { container } = render(
<TreeSelect
value={null}
Copy link
Member

Choose a reason for hiding this comment

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

value={[null]} value={[null, null]} value={['child1', null]} 的 UI 表现分别是什么样的？

Copy link
Contributor Author

Choose a reason for hiding this comment

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

你说的这3种形式，都属于同一种case，表明已选 value 为 null 的字段。 （这点和 select 的规则一样）

但应该不会出现第二种吧，表示选择了两个 null，

在 options 种允许 value 为 null 的

Copy link
Member

Choose a reason for hiding this comment

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

具体 UI 表现如何呢，本次改动是否有影响？

Copy link
Contributor Author

Choose a reason for hiding this comment

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

具体 UI 表现如何呢，本次改动是否有影响？

我 debug 枚举一下看看，（应该没啥影响）

Copy link
Contributor Author

Choose a reason for hiding this comment

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

before after
image image

multiple
placeholder="Fake placeholder"
treeData={[
{
label: 'parent',
value: 'parent',
children: [
{
label: 'child1',
value: 'child1',
},
{
label: 'child2',
value: 'child2',
},
],
},
]}
/>,
);

const values = Array.from(
container.querySelectorAll('.rc-tree-select-selection-item-content'),
); //.map(ele => ele.textContent);

expect(values).toHaveLength(0);

const placeholder = container.querySelector('[class$=placeholder]');
expect(placeholder).toBeTruthy();
expect(placeholder.textContent).toBe('Fake placeholder');
});

});
Loading