fix: trigger onBlur does not require reset focused (#980)

* fix: trigger onBlur does not require reset focused * chore: add test case * chore: update test case * Update tests/focus.test.tsx * Update tests/focus.test.tsx --------- Co-authored-by: dujiaqi <[email protected]> Co-authored-by: MadCcc <[email protected]>
react-component · Sep 14, 2023 · b5fccbd · b5fccbd
1 parent 28a3dab
commit b5fccbd
Show file tree

Hide file tree

Showing 2 changed files with 47 additions and 2 deletions.
diff --git a/src/BaseSelect.tsx b/src/BaseSelect.tsx
@@ -316,6 +316,7 @@ const BaseSelect = React.forwardRef((props: BaseSelectProps, ref: React.Ref<Base
   const triggerRef = React.useRef<RefTriggerProps>(null);
   const selectorRef = React.useRef<RefSelectorProps>(null);
   const listRef = React.useRef<RefOptionListProps>(null);
+  const blurRef = React.useRef<boolean>(false);
 
   /** Used for component focused management */
   const [mockFocused, setMockFocused, cancelSetMockFocused] = useDelayReset();
@@ -451,7 +452,8 @@ const BaseSelect = React.forwardRef((props: BaseSelectProps, ref: React.Ref<Base
       setInnerOpen(false);
     }
 
-    if (disabled) {
+    // After onBlur is triggered, the focused does not need to be reset
+    if (disabled && !blurRef.current) {
       setMockFocused(false);
     }
   }, [disabled]);
@@ -561,8 +563,11 @@ const BaseSelect = React.forwardRef((props: BaseSelectProps, ref: React.Ref<Base
   };
 
   const onContainerBlur: React.FocusEventHandler<HTMLElement> = (...args) => {
+    blurRef.current = true;
+
     setMockFocused(false, () => {
       focusRef.current = false;
+      blurRef.current = false;
       onToggleOpen(false);
     });
 

diff --git a/tests/focus.test.tsx b/tests/focus.test.tsx
@@ -1,7 +1,8 @@
 import { mount } from 'enzyme';
-import React from 'react';
+import React, { useState } from 'react';
 import { act } from 'react-dom/test-utils';
 import Select from '../src';
+import { fireEvent, render } from '@testing-library/react';
 
 describe('Select.Focus', () => {
   it('disabled should reset focused', () => {
@@ -31,6 +32,45 @@ describe('Select.Focus', () => {
     jest.useRealTimers();
   });
 
+  it('after onBlur is triggered the focused does not need to be reset', () => {
+    jest.useFakeTimers();
+
+    const onFocus = jest.fn();
+
+    const Demo: React.FC = () => {
+      const [disabled, setDisabled] = useState(false);
+      return (
+        <>
+          <Select disabled={disabled} onFocus={onFocus} onBlur={() => setDisabled(true)} />
+          <button onClick={() => setDisabled(false)} />
+        </>
+      );
+    };
+
+    const { container } = render(<Demo />);
+
+    fireEvent.focus(container.querySelector('input'));
+    jest.runAllTimers();
+
+    // trigger disabled
+    fireEvent.blur(container.querySelector('input'));
+    jest.runAllTimers();
+
+    // reset focused
+    onFocus.mockReset();
+
+    expect(container.querySelector('.rc-select-disabled')).toBeTruthy();
+
+    // reset disabled
+    fireEvent.click(container.querySelector('button'));
+    fireEvent.focus(container.querySelector('input'));
+    jest.runAllTimers();
+
+    expect(onFocus).toHaveBeenCalled();
+
+    jest.useRealTimers();
+  });
+
   it('IE focus', () => {
     jest.clearAllTimers();
     jest.useFakeTimers();