fix: display logic

Author: zombieJ

src/BaseSelect/index.tsx

@@ -504,12 +504,9 @@ const BaseSelect = React.forwardRef<BaseSelectRef, BaseSelectProps>((props, ref)
   // ============================ Disabled ============================
   // Close dropdown & remove focus state when disabled change
   React.useEffect(() => {
-    // if (mergedOpen && disabled) {
-    //   triggerOpen(false);
-    // }
-
     // After onBlur is triggered, the focused does not need to be reset
     if (disabled) {
+      triggerOpen(false);
       setFocused(false);
     }
   }, [disabled, mergedOpen]);

src/SelectInput/Content/index.tsx

@@ -10,7 +10,7 @@ export interface SharedContentProps {
 }
 
 const SelectContent = React.forwardRef<HTMLInputElement>(function SelectContent(_, ref) {
-  const { multiple, onInputKeyDown } = useSelectInputContext();
+  const { multiple, onInputKeyDown, tabIndex } = useSelectInputContext();
   const baseProps = useBaseProps();
   const { showSearch } = baseProps;
 
@@ -20,6 +20,7 @@ const SelectContent = React.forwardRef<HTMLInputElement>(function SelectContent(
     ...ariaProps,
     onKeyDown: onInputKeyDown,
     readOnly: !showSearch,
+    tabIndex,
   };
 
   if (multiple) {

src/SelectInput/index.tsx

@@ -54,6 +54,7 @@ const DEFAULT_OMIT_PROPS = [
   'tabIndex',
   'activeValue',
   'onSelectorRemove',
+  'focused',
 ] as const;
 
 export default React.forwardRef<SelectInputRef, SelectInputProps>(function SelectInput(

src/hooks/useOpen.ts

@@ -36,10 +36,7 @@ export default function useOpen(
 
     const nextOpenVal = typeof nextOpen === 'boolean' ? nextOpen : !mergedOpen;
 
-    if (nextOpenVal === mergedOpen) {
-      return;
-    }
-
+    // Since `mergedOpen` is post-processed, we need to check if the value really changed
     if (nextOpenVal) {
       triggerEvent(true);
       return;

tests/Select.test.tsx

@@ -672,8 +672,8 @@ describe('Select.Basic', () => {
 
       const focusSpy = jest.spyOn(container.querySelector('input'), 'focus');
 
-      fireEvent.mouseDown(container.querySelector('.rc-select-selector'));
-      fireEvent.click(container.querySelector('.rc-select-selector'));
+      fireEvent.mouseDown(container.querySelector('.rc-select'));
+      fireEvent.click(container.querySelector('.rc-select'));
       expect(focusSpy).toHaveBeenCalled();
 
       // We should mock trigger focus event since it not work in jsdom
@@ -1371,7 +1371,7 @@ describe('Select.Basic', () => {
     );
 
     // Open
-    fireEvent.mouseDown(container.querySelector('.rc-select-selector'));
+    fireEvent.mouseDown(container.querySelector('.rc-select'));
 
     fireEvent.mouseDown(container.querySelector('div#dropdown-custom-node'));
     fireEvent.click(container.querySelector('div#dropdown-custom-node'));
@@ -1864,6 +1864,8 @@ describe('Select.Basic', () => {
     });
 
     it('should not open dropdown after remove disabled', () => {
+      jest.useFakeTimers();
+
       const renderDemo = (disabled?: boolean) => (
         <Select disabled={disabled}>
           <Option value="1">1</Option>
@@ -1873,9 +1875,25 @@ describe('Select.Basic', () => {
 
       const { container, rerender } = render(renderDemo());
       toggleOpen(container);
+      act(() => {
+        jest.runAllTimers();
+      });
+      console.log('~~~~1');
       rerender(renderDemo(true));
+      act(() => {
+        jest.runAllTimers();
+      });
+
+      console.log('~~~~2');
       rerender(renderDemo(false));
+
+      act(() => {
+        jest.runAllTimers();
+      });
+
       expectOpen(container, false);
+
+      jest.useRealTimers();
     });
   });
 
@@ -2113,9 +2131,7 @@ describe('Select.Basic', () => {
     const { container } = render(<Select tabIndex={0} />);
     expect(container.querySelector('.rc-select').getAttribute('tabindex')).toBeFalsy();
 
-    expect(
-      container.querySelector('input.rc-select-selection-search-input').getAttribute('tabindex'),
-    ).toBe('0');
+    expect(container.querySelector('input').getAttribute('tabindex')).toBe('0');
   });
 
   describe('placement', () => {
@@ -2179,7 +2195,7 @@ describe('Select.Basic', () => {
   it('should support onClick', () => {
     const onClick = jest.fn();
     const { container } = render(<Select onClick={onClick} />);
-    fireEvent.click(container.querySelector('.rc-select-selector'));
+    fireEvent.click(container.querySelector('.rc-select'));
     expect(onClick).toHaveBeenCalled();
   });
 

tests/focus.test.tsx

@@ -78,7 +78,7 @@ describe('Select.Focus', () => {
 
     const focusFn = jest.spyOn(container.querySelector('input'), 'focus');
 
-    fireEvent.click(container.querySelector('.rc-select-selector'));
+    fireEvent.click(container.querySelector('.rc-select'));
     jest.runAllTimers();
 
     expect(focusFn).toHaveBeenCalled();

tests/shared/blurTest.tsx

@@ -62,11 +62,9 @@ export default function blurTest(mode: any) {
         handleBlur.mockReset();
 
         const preventDefault = jest.fn();
-        const mouseDownEvent = createEvent.mouseDown(
-          wrapper.container.querySelector('.rc-select-selector'),
-        );
+        const mouseDownEvent = createEvent.mouseDown(wrapper.container.querySelector('.rc-select'));
         mouseDownEvent.preventDefault = preventDefault;
-        fireEvent(wrapper.container.querySelector('.rc-select-selector'), mouseDownEvent);
+        fireEvent(wrapper.container.querySelector('.rc-select'), mouseDownEvent);
         expect(preventDefault).toHaveBeenCalled();
         expect(handleBlur).not.toHaveBeenCalled();