Close dropdown when select disabled (#449)

Author: morenyang

src/generate.tsx

@@ -627,7 +627,8 @@ export default function generateSelector<
 
     // ============================== Open ==============================
     const [innerOpen, setInnerOpen] = React.useState<boolean>(defaultOpen);
-    let mergedOpen: boolean = open !== undefined ? open : innerOpen;
+    let mergedOpen: boolean =
+      !disabled && (open !== undefined ? open : innerOpen);
 
     // Not trigger `open` in `combobox` when `notFoundContent` is empty
     const emptyListContent = !notFoundContent && !displayOptions.length;
@@ -713,6 +714,13 @@ export default function generateSelector<
       return ret;
     };
 
+    // Close dropdown when disabled change
+    React.useEffect(() => {
+      if (innerOpen && !!disabled) {
+        setInnerOpen(false);
+      }
+    }, [disabled]);
+
     // Close will clean up single mode search text
     React.useEffect(() => {
       if (!mergedOpen && !isMultiple && mode !== 'combobox') {

tests/Select.test.tsx

@@ -1457,4 +1457,42 @@ describe('Select.Basic', () => {
     wrapper.update();
     expect(wrapper.find('.rc-select-selection-item')).toHaveLength(0);
   });
+
+  describe('disabled on open', () => {
+    it('should not show dropdown when oepn and disabled', () => {
+      const wrapper = mount(
+        <Select open disabled>
+          <Option value="1">1</Option>
+          <Option value="2">2</Option>
+        </Select>,
+      );
+      expectOpen(wrapper, false);
+    });
+
+    it('should close dropdown when disabled after open', () => {
+      const wrapper = mount(
+        <Select>
+          <Option value="1">1</Option>
+          <Option value="2">2</Option>
+        </Select>,
+      );
+      toggleOpen(wrapper);
+      expectOpen(wrapper, true);
+      wrapper.setProps({ disabled: true });
+      expectOpen(wrapper, false);
+    });
+
+    it('should not open dropdown after remove disabled', () => {
+      const wrapper = mount(
+        <Select>
+          <Option value="1">1</Option>
+          <Option value="2">2</Option>
+        </Select>,
+      );
+      toggleOpen(wrapper);
+      wrapper.setProps({ disabled: true });
+      wrapper.setProps({ disabled: false });
+      expectOpen(wrapper, false);
+    });
+  });
 });

tests/__snapshots__/Select.test.tsx.snap

@@ -400,6 +400,7 @@ exports[`Select.Basic render renders disabled select correctly 1`] = `
         aria-activedescendant="undefined_list_0"
         aria-autocomplete="list"
         aria-controls="undefined_list"
+        aria-expanded="false"
         aria-haspopup="listbox"
         aria-owns="undefined_list"
         autocomplete="off"