Fix/cascader search #2030

YyumeiZhang · 2024-01-19T05:18:12Z

I have read and followed Pull Request Guidelines of the contributing guide.

What kind of change does this PR introduce? (check at least one)

PR description

Fixes

Cascader 在搜索内容为英文逗号时选项面板显示全部选项

问题原因，使用了 join引入了多余的 , 逗号

var a = [1,2,3]
a.join('')  // 123  ，应该这么写
a.join()   // 1,2,3   不应该这么写

Changelog

🇨🇳 Chinese

Fix: 修复 Cascader 在搜索内容为英文逗号时选项面板显示全部选项问题
Fix: 修复多选，showClear 的 Cascader 在点击清除按钮后，选项面板没有从搜索状态切换到普通状态问题

🇺🇸 English

Fix: Fixed the issue where Cascader's options panel displays all options when search content is English commas
Fix: Fixed the problem of multi-selection and showClear's Cascader. After clicking the clear button, the options panel did not switch from the search state to the normal state.

Checklist

Test or no need
Document or no need
Changelog or no need

Other

Skip Changelog

Additional information

… button, option panel still in search status

…d hitting all data

codesandbox-ci · 2024-01-19T05:21:05Z

This pull request is automatically built and testable in CodeSandbox.

To see build info of the built libraries, click here or the icon next to each commit SHA.

Latest deployment of this branch, based on commit 6771a3f:

Sandbox	Source
pr-story	Configuration
Semi Design: Simple Story	Configuration

codecov-commenter · 2024-01-19T05:34:12Z

Codecov Report

Attention: 7 lines in your changes are missing coverage. Please review.

Comparison is base (c81cf78) 87.44% compared to head (610891e) 87.40%.
Report is 19 commits behind head on main.

❗ Current head 610891e differs from pull request most recent head 6771a3f. Consider uploading reports for the commit 6771a3f to get more accurate results

Files	Patch %	Lines
packages/semi-ui/input/textarea.tsx	80.95%	4 Missing ⚠️
packages/semi-foundation/cascader/util.ts	90.90%	1 Missing ⚠️
...es/semi-foundation/image/previewInnerFoundation.ts	66.66%	1 Missing ⚠️
packages/semi-ui/image/previewInner.tsx	50.00%	1 Missing ⚠️

❗ Your organization needs to install the Codecov GitHub app to enable full functionality.

Additional details and impacted files

@@            Coverage Diff             @@
##             main    #2030      +/-   ##
==========================================
- Coverage   87.44%   87.40%   -0.05%     
==========================================
  Files         437      437              
  Lines       25664    25667       +3     
  Branches     6504     6502       -2     
==========================================
- Hits        22441    22433       -8     
- Misses       3223     3234      +11

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

cypress · 2024-01-19T05:34:50Z

Passing run #2226 ↗︎

0	219	10	0	0
⚠️ You've recorded test results over your free plan limit. Upgrade your plan to view test results.

Details:

Merge `6771a3f` into `1fe3733`...
Project: semi-design	Commit: `610891eb27 ℹ️`
Status: Passed	Duration: 08:26 💡
Started: Jan 29, 2024 10:04 AM	Ended: Jan 29, 2024 10:12 AM

Review all test suite changes for PR #2030 ↗︎

YyumeiZhang · 2024-01-19T06:58:37Z

packages/semi-foundation/cascader/foundation.ts

@@ -908,7 +908,7 @@ export default class CascaderFoundation extends BaseFoundation<CascaderAdapter,
                    if (_notExist) {
                        return false;
                    }
-                    const filteredPath = this.getItemPropPath(key, treeNodeFilterProp).join();
+                    const filteredPath = this.getItemPropPath(key, treeNodeFilterProp).join('');
                    return filter(sugInput, data, filterTreeNode, false, filteredPath);


搜索内容为英文逗号时，匹配全量数据的问题时因为此处拼接级连数据时，用了数组的 join()，引入了多余的英文逗号，导致选项都满足筛选条件

此处修改的风险问题：在 filterTreeNode 的第二个参数返回值有变化

参数返回值改变，这个不行

已修改。原来 tree/treeSelect/Cascader公用 tree/treeUtils.tsx中的 filter，为修复 cascader 中搜索英文逗号匹配全量数据的问题，同时保证 filterTreeNode 中对外透传的 treeNodeString 不变。另外为了便于理解，将 cascader 的 filter 单独拆分出在 foundation 的 cascader/utils.tsx中

YyumeiZhang · 2024-01-19T07:02:57Z

packages/semi-foundation/cascader/foundation.ts

@@ -932,6 +932,7 @@ export default class CascaderFoundation extends BaseFoundation<CascaderAdapter,
        const isControlled = this._isControlledComponent();
        const newState: Partial<BasicCascaderInnerData> = {};
        if (multiple) {
+            newState.isSearching = false;
            this._adapter.updateInputValue('');


在点击清除按钮后，已选项和搜索数据都被清空，应该将 isSearching 修改为 false，和单选的清空状态处理保持一致，否则会造成多选，搜素时，点击清空按钮，选项面板无法从搜索状态转为普通状态

YyumeiZhang · 2024-01-19T07:04:18Z

packages/semi-ui/cascader/index.tsx

        const hasValue = selectedKeys.size;
        const multipleWithHaveValue = multiple && checkedKeys.size;
-        return showClear && (hasValue || multipleWithHaveValue) && !disabled && (isOpen || isHovering);
+        return showClear && (inputValue || hasValue || multipleWithHaveValue) && !disabled && (isOpen || isHovering);


设置了 showClear，在有已选项或者有搜索值时候，满足其他条件的情况下，都应该显示清除按钮

…d hitting all data

YyumeiZhang added 2 commits January 19, 2024 13:08

fix: fix multi-selected, showClear Cascader, after clicking the clear…

574b900

… button, option panel still in search status

fix: Fixed the problem of searching for English commas in Cascader an…

0f88e88

…d hitting all data

YyumeiZhang requested a review from pointhalo January 19, 2024 06:53

YyumeiZhang commented Jan 19, 2024

View reviewed changes

fix: Fixed the problem of searching for English commas in Cascader an…

6771a3f

…d hitting all data

pointhalo merged commit 0a34016 into main Feb 6, 2024
9 checks passed

pointhalo deleted the fix/cascader-search branch February 6, 2024 08:03

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Fix/cascader search #2030

Fix/cascader search #2030

YyumeiZhang commented Jan 19, 2024 •

edited by pointhalo

codesandbox-ci bot commented Jan 19, 2024 •

edited

codecov-commenter commented Jan 19, 2024 •

edited

cypress bot commented Jan 19, 2024 •

edited

YyumeiZhang Jan 19, 2024

YyumeiZhang Jan 19, 2024

pointhalo Jan 19, 2024

YyumeiZhang Jan 29, 2024

YyumeiZhang Jan 19, 2024

YyumeiZhang Jan 19, 2024

Fix/cascader search #2030

Fix/cascader search #2030

Conversation

YyumeiZhang commented Jan 19, 2024 • edited by pointhalo

What kind of change does this PR introduce? (check at least one)

PR description

Changelog

Checklist

Other

Additional information

codesandbox-ci bot commented Jan 19, 2024 • edited

codecov-commenter commented Jan 19, 2024 • edited

Codecov Report

cypress bot commented Jan 19, 2024 • edited

Passing run #2226 ↗︎

Review all test suite changes for PR #2030 ↗︎

YyumeiZhang Jan 19, 2024

Choose a reason for hiding this comment

YyumeiZhang Jan 19, 2024

Choose a reason for hiding this comment

pointhalo Jan 19, 2024

Choose a reason for hiding this comment

YyumeiZhang Jan 29, 2024

Choose a reason for hiding this comment

YyumeiZhang Jan 19, 2024

Choose a reason for hiding this comment

YyumeiZhang Jan 19, 2024

Choose a reason for hiding this comment

YyumeiZhang commented Jan 19, 2024 •

edited by pointhalo

codesandbox-ci bot commented Jan 19, 2024 •

edited

codecov-commenter commented Jan 19, 2024 •

edited

cypress bot commented Jan 19, 2024 •

edited