fix: select remote + autoClearSearchValue false update list not show, #1386 (#1510)

cypress/integration/select.spec.js

@@ -54,6 +54,14 @@ describe('Select', () => {
         cy.get('.semi-popover-wrapper').eq(0).should('have.css', 'height', '0px');
     });
 
+    it('autoClearSearchValue false + remote + optionList update async', () => {
+        cy.visit('http://127.0.0.1:6006/iframe.html?path=/story/select--auto-clear-search-value');
+        cy.get('.remote-select').eq(0).click();
+        cy.get('.semi-select-option').eq(0).click();
+        cy.get('.remote-select .semi-input').eq(0).type('123');
+        cy.wait(500);
+        cy.get('.semi-select-option').should('have.text', 'Design');
+    });
     // it('should trigger onSearch when click x icon', () => {
     //     cy.visit('http://127.0.0.1:6006/iframe.html?path=/story/select--select-filter-single');
     //     cy.get('.semi-select').eq(0).click();

packages/semi-foundation/select/foundation.ts

@@ -94,7 +94,7 @@ export default class SelectFoundation extends BaseFoundation<SelectAdapter> {
         if (isFilterable && isMultiple) {
             // when filter and multiple, only focus input
             this.focusInput();
-        } else if (isFilterable && !isMultiple){
+        } else if (isFilterable && !isMultiple) {
             // when filter and not multiple, only show input and focus input
             this.toggle2SearchInput(true);
         } else {
@@ -196,7 +196,7 @@ export default class SelectFoundation extends BaseFoundation<SelectAdapter> {
 
     // call when props.value change
     handleValueChange(value: PropValue) {
-        const { allowCreate, autoClearSearchValue } = this.getProps();
+        const { allowCreate, autoClearSearchValue, remote } = this.getProps();
         const { inputValue } = this.getStates();
         let originalOptions;
         // AllowCreate and controlled mode, no need to re-collect optionList
@@ -212,7 +212,7 @@ export default class SelectFoundation extends BaseFoundation<SelectAdapter> {
         // Multi-selection, controlled mode, you need to reposition the drop-down menu after updating
         this._adapter.rePositionDropdown();
 
-        if (this._isFilterable() && !autoClearSearchValue && inputValue) {
+        if (this._isFilterable() && !autoClearSearchValue && inputValue && !remote) {
             originalOptions = this._filterOption(originalOptions, inputValue);
         }
 
@@ -555,7 +555,7 @@ export default class SelectFoundation extends BaseFoundation<SelectAdapter> {
     clearInput(event?: any) {
         const { inputValue } = this.getStates();
         // only when input is not null, select should notifySearch and updateOptions
-        if (inputValue !== ''){
+        if (inputValue !== '') {
             this._adapter.updateInputValue('');
             this._adapter.notifySearch('', event);
             // reset options filter
@@ -793,16 +793,16 @@ export default class SelectFoundation extends BaseFoundation<SelectAdapter> {
         isOpen ? this._getEnableFocusIndex(offset) : this.open();
     }
 
-    _handleTabKeyDown(event: any){
+    _handleTabKeyDown(event: any) {
         const { isOpen } = this.getStates();
         this._adapter.updateFocusState(false);
 
-        if (isOpen){
+        if (isOpen) {
             const container = this._adapter.getContainer();
             const focusableElements = this._adapter.getFocusableElements(container);
             const focusableNum = focusableElements.length;
 
-            if (focusableNum > 0){
+            if (focusableNum > 0) {
                 // Shift + Tab will move focus backward
                 if (event.shiftKey) {
                     this._handlePanelOpenShiftTabKeyDown(focusableElements, event);
@@ -823,7 +823,7 @@ export default class SelectFoundation extends BaseFoundation<SelectAdapter> {
     _handlePanelOpenTabKeyDown(focusableElements: any[], event: any) {
         const activeElement = this._adapter.getActiveElement();
         const isFocusInContainer = this._adapter.getIsFocusInContainer();
-        if (!isFocusInContainer){
+        if (!isFocusInContainer) {
             // focus in trigger, set next focus to the first element in container
             focusableElements[0].focus();
             this._adapter.setIsFocusInContainer(true);
@@ -854,7 +854,7 @@ export default class SelectFoundation extends BaseFoundation<SelectAdapter> {
 
     _handleEnterKeyDown(event: KeyboardEvent) {
         const { isOpen, options, focusIndex } = this.getStates();
-        if (!isOpen){
+        if (!isOpen) {
             this.open();
         } else {
             if (focusIndex !== -1) {

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

@@ -2907,6 +2907,32 @@ export const AutoClearSearchValue = () => {
         { label: 'semi6', value: 'semi6' },
     ];
 
+    const [loading, setLoading] = useState(false);
+    const [list, setList] = useState(optionList);
+    const [value, setValue] = useState('');
+
+    const handleChange = newValue => { setValue(newValue); };
+
+    const data2 = [
+        {
+            label: "Design",
+            value: '123456',
+        }
+    ]
+
+    const handleSearch = (inputValue) => {
+        setLoading(true);
+        if (inputValue) {
+            setTimeout(() => {
+                setLoading(false);
+                setList(data2);
+            }, 1000);
+        } else {
+            setList(optionList)
+            setLoading(false);
+        }
+    };
+
     return (
         <>  
             <h4>autoClearSearchValue</h4>
@@ -2920,6 +2946,22 @@ export const AutoClearSearchValue = () => {
             <Select style={{ width: 400 }} multiple optionList={optionList} filter autoClearSearchValue={clear}></Select>
             <h4>Uncontrolled mode + multiple + defaultValue</h4>
             <Select style={{ width: 400 }} multiple optionList={optionList} filter defaultValue={['semi2']} autoClearSearchValue={clear}></Select>
+
+            <h4>controlled mode + update optionList + remote + autoClearSearchValue = false</h4>
+            <Select
+              style={{ width: 400 }}
+              multiple
+              optionList={list}
+              filter
+              remote
+              className='remote-select'
+              loading={loading}
+              value={value}
+              onChange={handleChange}
+              autoClearSearchValue={clear}
+              onSearch={handleSearch}
+            >
+            </Select>
         </>
     )
 }
@@ -3209,3 +3251,4 @@ export const emptyContent = () => {
   )
 }
 
+