fix: [Cascader] Fix for the single-select, searchable, and Value-controlled Cascader in the search state, the value change causes the search value to change (#1473)

cypress/integration/cascader.spec.js

@@ -103,4 +103,13 @@ describe('cascader', () => {
         cy.get('.semi-checkbox').eq(0).click();
         cy.get('.semi-tag-content').contains('亚洲');
     });
+
+    it('value change in search', () => {
+        cy.visit('http://127.0.0.1:6006/iframe.html?id=cascader--set-value-in-search&args=&viewMode=story');
+        cy.get('.semi-cascader-selection').click();
+        // mouse over change value
+        cy.get('#mouseIn').trigger('mouseover');
+        // value change should not effect input value
+        cy.get('input').should('have.value', '');
+    });
 });

packages/semi-foundation/cascader/foundation.ts

@@ -441,7 +441,11 @@ export default class CascaderFoundation extends BaseFoundation<CascaderAdapter,
                 if (filterable && !multiple) {
                     const displayText = this.renderDisplayText(selectedKey, keyEntities);
                     updateStates.inputPlaceHolder = displayText;
-                    updateStates.inputValue = displayText;
+                    /* 
+                     *  displayText should not be assign to inputValue,
+                     *  cause inputValue should only change by user enter
+                     */
+                    // updateStates.inputValue = displayText;
                 }
             /**
              * If selectedKeys does not meet the update conditions,
@@ -472,7 +476,11 @@ export default class CascaderFoundation extends BaseFoundation<CascaderAdapter,
             if (filterable && !multiple) {
                 const displayText = this._defaultRenderText(valuePath);
                 updateStates.inputPlaceHolder = displayText;
-                updateStates.inputValue = displayText;
+                /* 
+                 *  displayText should not be assign to inputValue,
+                 *  cause inputValue should only change by user enter
+                 */
+                // updateStates.inputValue = displayText;
             }
             keyEntities[key] = optionNotExist as BasicEntity;
             // Fix: 1155, if the data is loaded asynchronously to update treeData, the emptying operation should not be done when entering the updateSelectedKey method

packages/semi-ui/cascader/_story/cascader.stories.jsx

@@ -1909,3 +1909,75 @@ export const FixCursorPositionError = () => {
     <Cascader {...props} size={'large'}/>
   </>);
 }
+
+export const setValueInSearch = () => {
+  const treeData = [
+    {
+        label: '浙江省',
+        text: '杭州市',
+        value: 'zhejiang',
+        children: [
+            {
+                label: <div>杭州市</div>,
+                text: '杭州市',
+                value: 'hangzhou',
+                children: [
+                    {
+                        label: <div>西湖区</div>,
+                        text: '西湖区',
+                        value: 'xihu',
+                    },
+                    {
+                        label: <div>萧山区</div>,
+                        text: '萧山区',
+                        value: 'xiaoshan',
+                    },
+                    {
+                        label: <div>临安区</div>,
+                        text: '临安区',
+                        value: 'linan',
+                    },
+                ],
+            },
+            {
+                label: '宁波市',
+                text: '宁波市',
+                value: 'ningbo',
+                children: [
+                    {
+                        label: '海曙区',
+                        text: '海曙区',
+                        value: 'haishu',
+                    },
+                    {
+                        label: '江北区',
+                        text: '江北区',
+                        value: 'jiangbei',
+                    }
+                ]
+            },
+        ],
+      }
+  ];
+  const [value, setValue] = useState(['zhejiang', 'hangzhou', 'xiaoshan']);
+  const handleMouseIn = () => setValue(['zhejiang', 'hangzhou', 'xihu']);
+  return (
+      <div>
+        {/* 关联issue，https://github.com/DouyinFE/semi-design/issues/1472 */}
+          <span id={"mouseIn"} onMouseEnter={handleMouseIn}>changeValueWhenMouseIn</span>
+          <Cascader
+              value={value}
+              style={{ width: 300 }}
+              treeData={treeData}
+              placeholder="默认对label值进行搜索"
+              filterTreeNode
+              treeNodeFilterProp='text'
+              displayProp='text'
+              displayRender={(names) => {
+                console.log('names', names)
+                return names.join("--");
+              }}
+          />
+      </div>
+  );
+}