fix: trigger the focus function after clicking the clear button, make the select isFocus be true (#2035)

Co-authored-by: pointhalo <[email protected]>

cypress/e2e/select.spec.js

@@ -89,33 +89,38 @@ describe('Select', () => {
 
         cy.viewport(1000, 1000);
 
-        cy.get('.semi-select-selection').eq(0).click();
+        cy.get('[data-cy=singleDefault]').click();
         cy.get('.semi-select-option').eq(1).click();
         cy.root().click('right');
         cy.get('@consoleLog').should('be.calledWith', 'single autoFocus onBlur');
         cy.get('@consoleLog').should('be.calledWith', 'single default onBlur');
 
-        cy.get('.semi-select-selection').eq(1).click();
+        cy.get('[data-cy=singleFilter]').click();
         cy.get('.semi-select-option').eq(1).click();
         cy.root().click('right');
         cy.get('@consoleLog').should('be.calledWith', 'single filter onBlur');
 
-        cy.get('.semi-select-selection').eq(3).click();
+        cy.get('[data-cy=singleClickToHide]').click();
         cy.get('.semi-select-option').eq(1).click();
         cy.root().click('right');
         cy.get('@consoleLog').should('be.calledWith', 'single clickToHide onBlur');
 
-        cy.get('.semi-select-selection').eq(4).click();
+        cy.get('[data-cy=singleShowClear]').click();
+        cy.get('.semi-select-option').eq(1).click();
+        cy.root().click('right');
+        cy.get('@consoleLog').should('be.calledWith', 'single showClear onBlur');
+
+        cy.get('[data-cy=multipleDefault]').click();
         cy.get('.semi-select-option').eq(1).click();
         cy.root().click('right');
         cy.get('@consoleLog').should('be.calledWith', 'multiple default onBlur');
 
-        cy.get('.semi-select-selection').eq(5).click();
+        cy.get('[data-cy=multipleFilter]').click();
         cy.get('.semi-select-option').eq(1).click();
         cy.root().click('right');
         cy.get('@consoleLog').should('be.calledWith', 'multiple filter onBlur');
 
-        cy.get('.semi-select-selection').eq(6).click();
+        cy.get('[data-cy=multipleClickToHide]').click();
         cy.get('.semi-select-option').eq(1).click();
         cy.root().click('right');
         cy.get('@consoleLog').should('be.calledWith', 'multiple clickToHide onBlur');
@@ -131,29 +136,33 @@ describe('Select', () => {
 
         cy.viewport(1000, 1000);
 
-        cy.get('.semi-select-selection').eq(0).click();
+        cy.get('[data-cy=singleDefault]').click();
         cy.root().click('right');
         cy.get('@consoleLog').should('be.calledWith', 'single autoFocus onBlur');
         cy.get('@consoleLog').should('be.calledWith', 'single default onBlur');
 
-        cy.get('.semi-select-selection').eq(1).click();
+        cy.get('[data-cy=singleFilter]').click();
         cy.root().click('right');
         cy.get('@consoleLog').should('be.calledWith', 'single filter onBlur');
 
-        cy.get('.semi-select-selection').eq(3).click();
+        cy.get('[data-cy=singleClickToHide]').click();
         cy.root().click('right');
         cy.get('@consoleLog').should('be.calledWith', 'single clickToHide onBlur');
 
-        cy.get('.semi-select-selection').eq(4).click();
+        cy.get('[data-cy=singleShowClear]').click();
+        cy.root().click('right');
+        cy.get('@consoleLog').should('be.calledWith', 'single showClear onBlur');
+
+        cy.get('[data-cy=multipleDefault]').click();
         cy.get('.semi-select-option').eq(1).click();
         cy.root().click('right');
         cy.get('@consoleLog').should('be.calledWith', 'multiple default onBlur');
 
-        cy.get('.semi-select-selection').eq(5).click();
+        cy.get('[data-cy=multipleFilter]').click();
         cy.root().click('right');
         cy.get('@consoleLog').should('be.calledWith', 'multiple filter onBlur');
 
-        cy.get('.semi-select-selection').eq(6).click();
+        cy.get('[data-cy=multipleClickToHide]').click();
         cy.root().click('right');
         cy.get('@consoleLog').should('be.calledWith', 'multiple clickToHide onBlur');
 

packages/semi-foundation/select/foundation.ts

@@ -1022,6 +1022,8 @@ export default class SelectFoundation extends BaseFoundation<SelectAdapter> {
         if (filter) {
             this.clearInput(e);
         }
+        // after click showClear button, the select need to be focused
+        this.focus();
         this.clearSelected();
         // prevent this click open dropdown
         e.stopPropagation();

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

@@ -3416,12 +3416,10 @@ export const TestOptionKey = () => {
 }
 
 export const AllCaseOfBlur = () => {
-  return (
-    <div>
-      <h3>单选</h3>
-      <Divider margin='12px' />
-      <h5>默认配置</h5>
-      <Select defaultValue="abc" style={{ width: 120 }} onBlur={()=>{console.log('single default onBlur')}} >
+
+  const BaseSelect = (props) => {
+    return (
+       <Select defaultValue="abc" style={{ width: 120 }} {...props} >
         <Select.Option value="abc">抖音</Select.Option>
         <Select.Option value="ulikecam">轻颜相机</Select.Option>
         <Select.Option value="jianying" disabled>
@@ -3429,67 +3427,38 @@ export const AllCaseOfBlur = () => {
         </Select.Option>
         <Select.Option value="xigua">西瓜视频</Select.Option>
       </Select>
+    )
+  }
+  return (
+    <div>
+      <h3>单选</h3>
+      <Divider margin='12px' />
+      <h5>默认配置</h5>
+      <BaseSelect data-cy="singleDefault" onBlur={()=>{console.log('single default onBlur')}} />
       <br />
       <h5>filter</h5>
-      <Select defaultValue="abc" style={{ width: 120 }} filter onBlur={()=>{console.log('single filter onBlur')}}>
-        <Select.Option value="abc">抖音</Select.Option>
-        <Select.Option value="ulikecam">轻颜相机</Select.Option>
-        <Select.Option value="jianying" disabled>
-            剪映
-        </Select.Option>
-        <Select.Option value="xigua">西瓜视频</Select.Option>
-      </Select>
+      <BaseSelect data-cy="singleFilter" filter onBlur={()=>{console.log('single filter onBlur')}} />
       <br />
       <h5>autoFocus</h5>
-      <Select defaultValue="abc" style={{ width: 120 }} autoFocus onBlur={()=>{console.log('single autoFocus onBlur')}}>
-        <Select.Option value="abc">抖音</Select.Option>
-        <Select.Option value="ulikecam">轻颜相机</Select.Option>
-        <Select.Option value="jianying" disabled>
-            剪映
-        </Select.Option>
-        <Select.Option value="xigua">西瓜视频</Select.Option>
-      </Select>
+      <BaseSelect data-cy="singleAutoFocus" autoFocus onBlur={()=>{console.log('single autoFocus onBlur')}} />
       <br />
       <h5>clickToHide</h5>
-      <Select defaultValue="abc" style={{ width: 120 }} clickToHide onBlur={()=>{console.log('single clickToHide onBlur')}}>
-        <Select.Option value="abc">抖音</Select.Option>
-        <Select.Option value="ulikecam">轻颜相机</Select.Option>
-        <Select.Option value="jianying" disabled>
-            剪映
-        </Select.Option>
-        <Select.Option value="xigua">西瓜视频</Select.Option>
-      </Select>
+      <BaseSelect data-cy="singleClickToHide" clickToHide onBlur={()=>{console.log('single clickToHide onBlur')}} />
       <br />
+      <h5>showClear</h5>
+      <BaseSelect data-cy="singleShowClear" showClear onBlur={()=>{console.log('single showClear onBlur')}} />
+
       <h3>多选</h3>
       <Divider margin='12px' />
       <h5>默认配置</h5>
-      <Select defaultValue="abc" style={{ width: 220 }} multiple onBlur={()=>{console.log('multiple default onBlur')}}>
-        <Select.Option value="abc">抖音</Select.Option>
-        <Select.Option value="ulikecam">轻颜相机</Select.Option>
-        <Select.Option value="jianying" disabled>
-            剪映
-        </Select.Option>
-        <Select.Option value="xigua">西瓜视频</Select.Option>
-      </Select>
+      <BaseSelect data-cy="multipleDefault" multiple onBlur={()=>{console.log('multiple default onBlur')}} />
       <br />
       <h5>filter</h5>
-      <Select defaultValue="abc" style={{ width: 220 }} multiple filter onBlur={()=>{console.log('multiple filter onBlur')}}>
-        <Select.Option value="abc">抖音</Select.Option>
-        <Select.Option value="ulikecam">轻颜相机</Select.Option>
-        <Select.Option value="jianying" disabled>
-            剪映
-        </Select.Option>
-        <Select.Option value="xigua">西瓜视频</Select.Option>
-      </Select>
+      <BaseSelect data-cy="multipleFilter" multiple filter onBlur={()=>{console.log('multiple filter onBlur')}} />
       <h5>clickToHide</h5>
-      <Select defaultValue="abc" style={{ width: 120 }} multiple clickToHide onBlur={()=>{console.log('multiple clickToHide onBlur')}}>
-        <Select.Option value="abc">抖音</Select.Option>
-        <Select.Option value="ulikecam">轻颜相机</Select.Option>
-        <Select.Option value="jianying" disabled>
-            剪映
-        </Select.Option>
-        <Select.Option value="xigua">西瓜视频</Select.Option>
-      </Select>
+      <BaseSelect data-cy="multipleClickToHide" multiple clickToHide onBlur={()=>{console.log('multiple clickToHide onBlur')}} />
+      <h5>showClear</h5>
+      <BaseSelect data-cy="multipleShowClear" multiple showClear onBlur={()=>{console.log('multiple showClear onBlur')}} />
       <br />
       <br />
     </div>