diff --git a/src/PickerInput/RangePicker.tsx b/src/PickerInput/RangePicker.tsx index d7d69c18f..5c01e303d 100644 --- a/src/PickerInput/RangePicker.tsx +++ b/src/PickerInput/RangePicker.tsx @@ -260,6 +260,8 @@ function RangePicker( setActiveIndex, nextActiveIndex, activeIndexList, + updateSubmitIndex, + hasActiveSubmitValue, ] = useRangeActive(disabled, allowEmpty, mergedOpen); const onSharedFocus = (event: React.FocusEvent, index?: number) => { @@ -325,8 +327,6 @@ function RangePicker( flushSubmit, /** Trigger `onChange` directly without check `disabledDate` */ triggerSubmitChange, - /** Tell `index` has filled value in it */ - hasSubmitValue, ] = useRangeValue, DateType>( filledProps, mergedValue, @@ -413,7 +413,7 @@ function RangePicker( if (date) { nextValue = fillCalendarValue(date, activeIndex); } - + updateSubmitIndex(activeIndex); // Get next focus index const nextIndex = nextActiveIndex(nextValue); @@ -641,7 +641,7 @@ function RangePicker( needConfirm && // Not change index if is not filled !allowEmpty[lastActiveIndex] && - !hasSubmitValue(lastActiveIndex) && + !hasActiveSubmitValue(lastActiveIndex) && calendarValue[lastActiveIndex] ) { selectorRef.current.focus({ index: lastActiveIndex }); diff --git a/src/PickerInput/hooks/useRangeActive.ts b/src/PickerInput/hooks/useRangeActive.ts index bf1b9b923..6eec27467 100644 --- a/src/PickerInput/hooks/useRangeActive.ts +++ b/src/PickerInput/hooks/useRangeActive.ts @@ -23,14 +23,24 @@ export default function useRangeActive( setActiveIndex: (index: number) => void, nextActiveIndex: NextActive, activeList: number[], + updateSubmitIndex: (index: number | null) => void, + hasActiveSubmitValue: (index: number) => boolean, ] { const [activeIndex, setActiveIndex] = React.useState(0); const [focused, setFocused] = React.useState(false); const activeListRef = React.useRef([]); - + const submitIndexRef = React.useRef(null); const lastOperationRef = React.useRef(null); + const updateSubmitIndex = (index: number | null) => { + submitIndexRef.current = index; + }; + + const hasActiveSubmitValue = (index: number) => { + return submitIndexRef.current === index; + }; + const triggerFocus = (nextFocus: boolean) => { setFocused(nextFocus); }; @@ -62,6 +72,7 @@ export default function useRangeActive( useLockEffect(focused || mergedOpen, () => { if (!focused) { activeListRef.current = []; + updateSubmitIndex(null); } }); @@ -79,5 +90,7 @@ export default function useRangeActive( setActiveIndex, nextActiveIndex, activeListRef.current, + updateSubmitIndex, + hasActiveSubmitValue, ]; } diff --git a/src/PickerInput/hooks/useRangeValue.ts b/src/PickerInput/hooks/useRangeValue.ts index bf33d1c6e..880a0aee6 100644 --- a/src/PickerInput/hooks/useRangeValue.ts +++ b/src/PickerInput/hooks/useRangeValue.ts @@ -142,7 +142,6 @@ export function useInnerValue void, /** Trigger `onChange` directly without check `disabledDate` */ triggerSubmitChange: (value: ValueType) => boolean, - /** Tell `index` has filled value in it */ - hasSubmitValue: (index: number) => boolean, ] { const { // MISC @@ -333,11 +330,6 @@ export default function useRangeValue { expect(onChange).toHaveBeenCalledWith(expect.anything(), ['06:00:00', '11:00:00']); }); + it('Field switch should be locked even when the field already has the values', () => { + const onChange = jest.fn(); + + const { container } = render(); + openPicker(container); + selectCell(15); + fireEvent.click(document.querySelector('.rc-picker-ok button')); + + selectCell(16); + fireEvent.click(document.querySelector('.rc-picker-ok button')); + + expect(onChange).toHaveBeenCalledWith(expect.anything(), [ + '1990-09-15 00:00:00', + '1990-09-16 00:00:00', + ]); + + onChange.mockReset(); + openPicker(container, 0); + selectCell(1); + openPicker(container, 1); + expect(container.querySelectorAll('input')[0]).toHaveFocus(); + expect(container.querySelectorAll('input')[1]).not.toHaveFocus(); + + fireEvent.click(document.querySelector('.rc-picker-ok button')); + openPicker(container, 1); + expect(container.querySelectorAll('input')[1]).toHaveFocus(); + selectCell(2); + fireEvent.click(document.querySelector('.rc-picker-ok button')); + expect(onChange).toHaveBeenCalledWith(expect.anything(), [ + '1990-09-01 00:00:00', + '1990-09-02 00:00:00', + ]); + }); + it('double click to confirm if needConfirm', () => { const onChange = jest.fn();