fix: field input focus switch trigger (#835)

* fix: it

* test: add test case

* docs: back of demo

* chore: comment on it

Author: zombieJ

src/PickerInput/RangePicker.tsx

@@ -260,7 +260,7 @@ function RangePicker<DateType extends object = any>(
     setActiveIndex,
     nextActiveIndex,
     activeIndexList,
-  ] = useRangeActive(disabled, allowEmpty);
+  ] = useRangeActive(disabled, allowEmpty, mergedOpen);
 
   const onSharedFocus = (event: React.FocusEvent<HTMLElement>, index?: number) => {
     triggerFocus(true);
@@ -627,6 +627,13 @@ function RangePicker<DateType extends object = any>(
       inherit: true,
     });
 
+    // When click input to switch the field, it will not trigger close.
+    // Which means it will lose the part confirm and we need fill back.
+    // ref: https://github.com/ant-design/ant-design/issues/49512
+    if (activeIndex !== index && mergedOpen && !needConfirm && complexPicker) {
+      triggerPartConfirm(null, true);
+    }
+
     setActiveIndex(index);
 
     onSharedFocus(event, index);

src/PickerInput/hooks/useRangeActive.ts

@@ -14,6 +14,7 @@ export type NextActive<DateType> = (nextValue: RangeValueType<DateType>) => numb
 export default function useRangeActive<DateType>(
   disabled: boolean[],
   empty: boolean[] = [],
+  mergedOpen: boolean = false,
 ): [
   focused: boolean,
   triggerFocus: (focused: boolean) => void,
@@ -57,7 +58,8 @@ export default function useRangeActive<DateType>(
   };
 
   // ============================= Effect =============================
-  useLockEffect(focused, () => {
+  // Wait in case it's from the click outside to blur
+  useLockEffect(focused || mergedOpen, () => {
     if (!focused) {
       activeListRef.current = [];
     }

tests/range.spec.tsx

@@ -1933,15 +1933,44 @@ describe('Picker.Range', () => {
           value: '2024-06-15',
         },
       });
-      
+
       fireEvent.keyDown(container.querySelectorAll('input')[1], {
         key: 'Enter',
         code: 'Enter',
       });
-
     });
-    
+
     expect(container.querySelectorAll('input')[1].value).toBe('2024-06-15');
     expect(container.querySelectorAll('input')[0].value).toBe('2024-06-13');
   });
+
+  it('click on the input should trigger success when with !needConfirm', () => {
+    const onChange = jest.fn();
+    const { container } = render(
+      <DayRangePicker showTime needConfirm={false} onChange={onChange} />,
+    );
+
+    // Select first field
+    openPicker(container, 0);
+    selectCell(1, 0);
+
+    // Select second field
+    openPicker(container, 1);
+    selectCell(2, 0);
+
+    // Click outside to blur
+    fireEvent.mouseDown(document.body);
+    fireEvent.mouseUp(document.body);
+    fireEvent.click(document.body);
+
+    act(() => {
+      jest.advanceTimersByTime(1000);
+    });
+
+    expect(onChange).toHaveBeenCalledWith(expect.anything(), [
+      '1990-09-01 00:00:00',
+      '1990-09-02 00:00:00',
+    ]);
+    expect(isOpen()).toBeFalsy();
+  });
 });