diff --git a/src/RangePicker.tsx b/src/RangePicker.tsx index 5fbf0984d..da2becd96 100644 --- a/src/RangePicker.tsx +++ b/src/RangePicker.tsx @@ -558,7 +558,7 @@ function InnerRangePicker(props: RangePickerProps) { // ============================= Input ============================= const onInternalBlur: React.FocusEventHandler = (e) => { - if (changeOnBlur) { + if (changeOnBlur && mergedOpen) { const selectedIndexValue = getValue(selectedValue, mergedActivePickerIndex); if (selectedIndexValue) { triggerChange(selectedValue, mergedActivePickerIndex); diff --git a/src/hooks/useRangeOpen.ts b/src/hooks/useRangeOpen.ts index f883e91a8..7746af3c0 100644 --- a/src/hooks/useRangeOpen.ts +++ b/src/hooks/useRangeOpen.ts @@ -40,12 +40,6 @@ export default function useRangeOpen( firstTimeOpen: boolean, triggerOpen: (open: boolean, activeIndex: 0 | 1 | false, source: SourceType) => void, ] { - // We record opened status here in case repeat open with picker - // const [openRecord, setOpenRecord] = React.useState<{ - // 0?: boolean; - // 1?: boolean; - // }>({}); - const [firstTimeOpen, setFirstTimeOpen] = React.useState(false); const [mergedOpen, setMergedOpen] = useMergedState(defaultOpen || false, { @@ -62,8 +56,6 @@ export default function useRangeOpen( const [nextActiveIndex, setNextActiveIndex] = React.useState<0 | 1>(null); const triggerOpen = useEvent((nextOpen: boolean, index: 0 | 1 | false, source: SourceType) => { - // console.error('✅', nextOpen, index, source, startSelectedValue, endSelectedValue); - if (index === false) { // Only when `nextOpen` is false and no need open to next index setMergedOpen(nextOpen); @@ -79,17 +71,9 @@ export default function useRangeOpen( // Also set next index if next is empty ![startSelectedValue, endSelectedValue][nextIndex] ) { - // Reset open record - // setOpenRecord({ - // [index]: true, - // }); setFirstTimeOpen(true); setNextActiveIndex(nextIndex); } else { - // setOpenRecord((ori) => ({ - // ...ori, - // [index]: true, - // })); setFirstTimeOpen(false); if (nextActiveIndex !== null) { @@ -97,14 +81,6 @@ export default function useRangeOpen( } } } else if (source === 'confirm' || (source === 'blur' && changeOnBlur)) { - // Close if current value is empty - // const selectedValue = [startSelectedValue, endSelectedValue][index]; - - // if (!selectedValue) { - // setMergedOpen(false); - // return; - // } - if (nextActiveIndex !== null) { setFirstTimeOpen(false); setMergedActivePickerIndex(nextActiveIndex); diff --git a/tests/blur.spec.tsx b/tests/blur.spec.tsx index 65c4c926b..541243d94 100644 --- a/tests/blur.spec.tsx +++ b/tests/blur.spec.tsx @@ -1,6 +1,6 @@ import { fireEvent, render } from '@testing-library/react'; import React from 'react'; -import { getMoment, MomentPicker, MomentRangePicker } from './util/commonUtil'; +import { getMoment, isOpen, MomentPicker, MomentRangePicker, openPicker } from './util/commonUtil'; describe('Picker.ChangeOnBlur', () => { beforeEach(() => { @@ -36,7 +36,7 @@ describe('Picker.ChangeOnBlur', () => { expect(onChange).toHaveBeenCalled(); }); - it.only('RangePicker', () => { + it('RangePicker', () => { const onChange = jest.fn(); const { container } = render( @@ -67,4 +67,28 @@ describe('Picker.ChangeOnBlur', () => { fireEvent.blur(container.querySelectorAll('input')[1]); expect(onChange).toHaveBeenCalled(); }); + + it('blur & close should not trigger change', () => { + const onCalendarChange = jest.fn(); + + const { container } = render( + <> + + , + ); + + expect(isOpen()).toBeFalsy(); + fireEvent.blur(container.querySelector('input')); + expect(onCalendarChange).not.toHaveBeenCalled(); + + // Open to trigger + openPicker(container); + expect(isOpen()).toBeTruthy(); + fireEvent.blur(container.querySelector('input')); + expect(onCalendarChange).toHaveBeenCalled(); + }); });