fix: Disabled select should reset focus state (#671)

* fix: Disabled select should reset focus state

* test: split to avoid test failed

Author: zombieJ

.eslintrc.js

@@ -9,6 +9,5 @@ module.exports = {
     'react/sort-comp': 0,
     'jsx-a11y/interactive-supports-focus': 0,
     'jsx-a11y/no-autofocus': 0,
-    'import/no-extraneous-dependencies': ['error', { devDependencies: true }],
   },
 };

.gitignore

@@ -21,6 +21,7 @@ Thumbs.db
 node_modules
 .cache
 dist
+debug.tsx
 assets/**/*.css
 build
 lib

src/generate.tsx

@@ -773,11 +773,15 @@ export default function generateSelector<
       setInnerSearchValue('');
     };
 
-    // Close dropdown when disabled change
+    // Close dropdown & remove focus state when disabled change
     useEffect(() => {
-      if (innerOpen && !!disabled) {
+      if (innerOpen && disabled) {
         setInnerOpen(false);
       }
+
+      if (disabled) {
+        setMockFocused(false);
+      }
     }, [disabled]);
 
     // Close will clean up single mode search text

tests/focus.test.tsx

@@ -0,0 +1,33 @@
+import { mount } from 'enzyme';
+import React from 'react';
+import { act } from 'react-dom/test-utils';
+import Select from '../src';
+
+describe('Select.Focus', () => {
+  it('disabled should reset focused', () => {
+    jest.clearAllTimers();
+    jest.useFakeTimers();
+
+    jest.clearAllTimers();
+
+    const wrapper = mount(<Select />);
+
+    // Focus
+    wrapper.find('input').simulate('focus');
+    act(() => {
+      jest.runAllTimers();
+      wrapper.update();
+    });
+    expect(wrapper.exists('.rc-select-focused')).toBeTruthy();
+
+    // Disabled
+    wrapper.setProps({ disabled: true });
+    act(() => {
+      jest.runAllTimers();
+      wrapper.update();
+    });
+    expect(wrapper.exists('.rc-select-focused')).toBeFalsy();
+
+    jest.useRealTimers();
+  });
+});