Skip to content

fix(tree-select): prevent redundant onChange, it and valueDisplay parameters undefined #3456

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

Closed
RSS1102 wants to merge 7 commits into from
Closed

fix(tree-select): prevent redundant onChange, it and valueDisplay parameters undefined #3456

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
8cdb623
fix(tree-select): prevent redundant onChange, and undefined it and va…
RSS1102 Mar 27, 2025
2c88daa
feat: use `usePersistFn` replace `useMemo`
RSS1102 Mar 27, 2025
52da39a
chore: 修改错误的返回
RSS1102 Mar 27, 2025
e9ac40b
chore: revert code
RSS1102 Mar 27, 2025
bcdb4db
chore: add default Values
RSS1102 Mar 28, 2025
160a9b0
chore: 优化写法
RSS1102 Mar 28, 2025
b578b0a
feat: add useMemo dependency
RSS1102 Mar 28, 2025
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
22 changes: 14 additions & 8 deletions packages/components/tree-select/TreeSelect.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -156,11 +156,15 @@ const TreeSelect = forwardRef<TreeSelectRefType, TreeSelectProps>((originalProps
return ({ onClose }) =>
isFunction(valueDisplay) ? valueDisplay({ value: normalizedValue, onClose }) : valueDisplay;
}

const displayNode = isFunction(valueDisplay)
? valueDisplay({ value: normalizedValue[0], onClose: noop })
? valueDisplay({
value: normalizedValue[0] || { [tKeys.label]: '', [tKeys.value]: undefined },
onClose: noop,
})
: valueDisplay;
return normalizedValue.length ? displayNode : '';
}, [valueDisplay, multiple, normalizedValue]);
}, [valueDisplay, multiple, normalizedValue, tKeys]);

const internalInputValueDisplay: SelectInputProps['valueDisplay'] = useMemo(() => {
// 只有单选且下拉展开时需要隐藏 valueDisplay
Expand Down Expand Up @@ -194,12 +198,14 @@ const TreeSelect = forwardRef<TreeSelectRefType, TreeSelectProps>((originalProps
);

const handleSingleChange = usePersistFn<TreeProps['onActive']>((value, context) => {
const $value = Array.isArray(value) && value.length ? value[0] : undefined;
onChange(formatValue($value, context.node.label), {
...context,
data: context.node.data,
trigger: 'check',
});
if (value.length > 0) {
const $value = Array.isArray(value) && value.length ? value[0] : undefined;
onChange(formatValue($value, context.node.label), {
...context,
data: context.node.data,
trigger: 'check',
});
}
Comment on lines +201 to +208
Copy link

Copilot AI Sep 11, 2025

Choose a reason for hiding this comment

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

The condition value.length > 0 and the subsequent check Array.isArray(value) && value.length are redundant. Since you're already checking value.length > 0, the inner condition value.length is unnecessary. Consider simplifying to const $value = value[0]; inside the if block.

Copilot uses AI. Check for mistakes.
// 单选选择后收起弹框
setPopupVisible(false, { ...context, trigger: 'trigger-element-click' });
});
Expand Down
3 changes: 2 additions & 1 deletion packages/components/tree-select/_example/valuedisplay.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,3 +1,4 @@
import { TreeOptionData } from '@tdesign/common-js/common';
import React, { useState } from 'react';
import { TreeSelect, Tag, Space } from 'tdesign-react';

Expand Down Expand Up @@ -45,7 +46,7 @@ export default function Example() {
placeholder="请选择"
value={value}
onChange={(val: string) => setValue(val)}
valueDisplay={({ value }: { value }) => `${value.label}(${value.value})`}
valueDisplay={({ value }: { value: TreeOptionData }) => `${value.label}(${value.value})`}
/>
<TreeSelect
data={options}
Expand Down
Loading