fix: select onSearch didn't trigger some time, close #867 (#899)

cypress/integration/select.spec.js

@@ -0,0 +1,68 @@
+// form.spec.js created with Cypress
+//
+// Start writing your Cypress tests below!
+// If you're unfamiliar with how Cypress works,
+// check out the link below and learn how to write your first test:
+// https://on.cypress.io/writing-first-test
+
+/**
+ * why use `.then`?
+ * @see https://docs.cypress.io/guides/core-concepts/variables-and-aliases#Return-Values
+ */
+describe('Select', () => {
+
+    it('option hover, change active', () => {
+        cy.visit('http://127.0.0.1:6006/iframe.html?path=/story/select--select-filter-single');
+        cy.get('.semi-select').eq(0).click();
+        // hover can change active index
+        cy.get('.semi-select-option').eq(5).trigger('mouseover');
+        cy.get('.semi-select-option-focused .semi-select-option-text').eq(0).should('have.text', 'wym');
+        // press downArrow to test it
+        cy.get('input').eq(0).type('{downArrow}');
+        cy.get('.semi-select-option-focused .semi-select-option-text').eq(0).should('have.text', 'opts');
+    });
+
+    it('keyboard-enter, select choose option', { keystrokeDelay: 0 }, () => {
+        cy.visit('http://127.0.0.1:6006/iframe.html?path=/story/select--select-filter-single');
+        cy.get('.semi-select').eq(0).click();
+        cy.get('input').eq(0).type('o');
+        cy.get('input').eq(0).type('{downArrow}');
+        cy.get('input').eq(0).type('{downArrow}');
+        cy.get('input').eq(0).type('{enter}');
+        cy.get('.semi-select-selection-text').eq(0).should('have.text', 'opts');
+    });
+
+    it('clickOutSide, should hide', () => {
+        cy.visit('http://127.0.0.1:6006/iframe.html?path=/story/select--select-filter-single');
+        cy.get('.semi-select').eq(0).click();
+        // should show now
+        cy.get('.semi-select-option-list').should('exist');
+        // should hide after click empty area
+        cy.get('h5').eq(0).click();
+        cy.get('.semi-select-option-list').should('not.exist');
+    });
+
+    // 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();
+    //     cy.get('.semi-select-option').eq(0).click();
+    //     cy.get('.semi-select').eq(0).click();
+    //     cy.get('.semi-select-clear').eq(0).click();
+    //     cy.get('.semi-select-input .semi-input').should('have.value', '');
+    // });
+
+    // it('should trigger onBlur and onSearch', () => {
+    //     cy.visit('http://127.0.0.1:6006/iframe.html?path=/story/form--use-form-api-set-value-update-array');
+    // });
+
+    // it('keyboard-skip disabled option when press up/down', () => {
+
+    // });
+
+    // it('optionList scroll, should trigger onListScroll', () => {
+    //     cy.visit('http://127.0.0.1:6006/iframe.html?path=/story/form--use-form-api-set-value-update-array');
+    // });
+
+
+
+});

packages/semi-foundation/select/foundation.ts

@@ -505,6 +505,15 @@ export default class SelectFoundation extends BaseFoundation<SelectAdapter> {
 
     clearInput() {
         this._adapter.updateInputValue('');
+        this._adapter.notifySearch('');
+        // reset options filter
+        const { options } = this.getStates();
+        const { remote } = this.getProps();
+        let optionsAfterFilter = options;
+        if (!remote) {
+            optionsAfterFilter = this._filterOption(options, '');
+        }
+        this._adapter.updateOptions(optionsAfterFilter);
     }
 
     focusInput() {
@@ -871,8 +880,10 @@ export default class SelectFoundation extends BaseFoundation<SelectAdapter> {
     }
 
     handleClearClick(e: MouseEvent) {
-        this.clearInput();
-        // TODO
+        const { filter } = this.getProps();
+        if (filter) {
+            this.clearInput();
+        }
         this.clearSelected();
         // prevent this click open dropdown
         e.stopPropagation();
@@ -946,6 +957,7 @@ export default class SelectFoundation extends BaseFoundation<SelectAdapter> {
             const { defaultValue, value } = currentProps;
             const selectedValues = value || defaultValue;
             if (!isNullOrUndefined(selectedValues) && !Array.isArray(selectedValues)) {
+                /* istanbul ignore next */
                 warning(true, '[Semi Select] defaultValue/value should be array type in multiple mode');
             }
         }

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

@@ -759,7 +759,9 @@ export const SelectFilterSingle = () => (
         width: '250px',
         margin: 10,
       }}
+      showClear
       autoFocus
+      onSearch={(val) => console.log(`onSearch:${val}`)}
       onFocus={() => console.log('onFocus')}
       onBlur={() => console.log('onBlur')}
     >
@@ -783,7 +785,9 @@ export const SelectFilterSingle = () => (
         margin: 10,
       }}
       filter={filter}
+      showClear
       onBlur={() => console.log('onBlur')}
+      onSearch={val => console.log(val)}
       onFocus={() => console.log('onFocus')}
     >
       <Option value={1}>opt1(value:1)</Option>
@@ -797,11 +801,13 @@ export const SelectFilterSingle = () => (
         width: '250px',
         margin: 10,
       }}
+      showClear
       filter={customFilter}
       onChange={v => console.log(v)}
       insetLabel="insetLabel"
       onFocus={() => console.log('onFocus')}
       onBlur={() => console.log('onBlur')}
+      onSearch={(val) => console.log(val)}
     >
       {colorOptions.map(option => (
         <Option value={option.value} key={option.value}>
@@ -1553,6 +1559,7 @@ const SearchDemo1 = () => {
         optionList={optionList}
         value={value}
         loading={loading}
+        showClear
         onChange={onChange}
       ></Select>
       非受控：
@@ -1561,6 +1568,7 @@ const SearchDemo1 = () => {
           width: '150px',
         }}
         filter
+        showClear
         onSearch={v => handleSearch(v)}
         optionList={optionList}
         loading={loading}
@@ -1571,6 +1579,7 @@ const SearchDemo1 = () => {
         style={{
           width: '150px',
         }}
+        showClear
         filter
         multiple
         onSearch={v => handleSearch(v)}
@@ -1662,6 +1671,7 @@ class SearchDemo2 extends React.Component {
           style={{
             width: 150,
           }}
+          showClear
           filter
           labelInValue
           onSearch={this.handleSearch}
@@ -1677,6 +1687,7 @@ class SearchDemo2 extends React.Component {
             width: 180,
           }}
           filter // labelInValue
+          showClear
           multiple
           value={value}
           renderSelectedItem={this.customRender}