fix: fixed the problem that after selecting a radio option, clicking …

…outside does not trigger the onblur event (#1977)
DouyinFE · Dec 15, 2023 · 7ce0d85 · 7ce0d85
1 parent c7982af
commit 7ce0d85
Show file tree

Hide file tree

Showing 3 changed files with 35 additions and 1 deletion.
diff --git a/cypress/e2e/select.spec.js b/cypress/e2e/select.spec.js
@@ -80,6 +80,20 @@ describe('Select', () => {
         cy.get('.semi-select-option').eq(3).should('have.text', 'Xigua');
     });
 
+    it('blur', () => {
+        cy.visit('http://127.0.0.1:6006/iframe.html?path=/story/select--select-on-blur-on-focus', {
+            onBeforeLoad(win) {
+                cy.stub(win.console, 'log').as('consoleLog');
+            },
+        });
+
+        cy.get('.semi-select-selection').eq(0).click();
+        cy.get('.semi-select-option').eq(0).click();
+        cy.get('body').click('right');
+        cy.get('@consoleLog').should('be.calledWith', 'onBlur');
+
+    });
+
     // it('ellipsisTrigger', () => {
     //     cy.visit('http://127.0.0.1:6006/iframe.html?path=/story/select--fix-1560');
 

diff --git a/packages/semi-foundation/select/foundation.ts b/packages/semi-foundation/select/foundation.ts
@@ -363,6 +363,7 @@ export default class SelectFoundation extends BaseFoundation<SelectAdapter> {
             this.close(e);
             this._notifyBlur(e);
             this._adapter.updateFocusState(false);
+            this._adapter.unregisterClickOutsideHandler();
         });
     }
 
@@ -383,7 +384,6 @@ export default class SelectFoundation extends BaseFoundation<SelectAdapter> {
         this._adapter.setIsFocusInContainer(false);
         // this.unBindKeyBoardEvent();
         // this._notifyBlur(e);
-        this._adapter.unregisterClickOutsideHandler();
         // this._adapter.updateFocusState(false);
 
         const isFilterable = this._isFilterable();

diff --git a/packages/semi-ui/select/_story/select.stories.jsx b/packages/semi-ui/select/_story/select.stories.jsx
@@ -2207,11 +2207,13 @@ const BlurDemo = () => {
   const onBlur = (value, e) => {
     console.log(value);
     console.log(e);
+    console.log('onBlur');
   };
 
   const onFocus = (value, e) => {
     console.log(value);
     console.log(e);
+    console.log('onFocus');
   };
 
   return (
@@ -2230,6 +2232,24 @@ const BlurDemo = () => {
         <Select.Option value="deguo">Germany</Select.Option>
         <Select.Option value="faguo">France</Select.Option>
       </Select>
+      <br />
+      <br />
+      <br />
+      <Select
+        filter
+        placeholder="多选"
+        style={{
+          width: 180,
+        }}
+        onBlur={onBlur}
+        onFocus={onFocus}
+        multiple
+      >
+        <Select.Option value="zhongguo">China</Select.Option>
+        <Select.Option value="hanguo">Korea</Select.Option>
+        <Select.Option value="deguo">Germany</Select.Option>
+        <Select.Option value="faguo">France</Select.Option>
+      </Select>
     </>
   );
 };