From fc572baa47ad7cbd041aec8202f0bc047b4eb7b5 Mon Sep 17 00:00:00 2001 From: zombiej Date: Wed, 24 Jun 2020 10:47:58 +0800 Subject: [PATCH 1/3] move blur to trigger into the hooks --- src/RangePicker.tsx | 5 ----- src/hooks/usePickerInput.ts | 3 ++- 2 files changed, 2 insertions(+), 6 deletions(-) diff --git a/src/RangePicker.tsx b/src/RangePicker.tsx index 7c6b21edf..e607f93e2 100644 --- a/src/RangePicker.tsx +++ b/src/RangePicker.tsx @@ -541,11 +541,6 @@ function InnerRangePicker(props: RangePickerProps) { }, triggerOpen: (newOpen: boolean) => { triggerOpen(newOpen, index); - - // Only blur will close open - if (!newOpen && mergedOpen !== newOpen && mergedActivePickerIndex === index) { - triggerChange(selectedValue, index); - } }, onSubmit: () => { triggerChange(selectedValue, index); diff --git a/src/hooks/usePickerInput.ts b/src/hooks/usePickerInput.ts index 4c03b66c5..2399411eb 100644 --- a/src/hooks/usePickerInput.ts +++ b/src/hooks/usePickerInput.ts @@ -99,8 +99,9 @@ export default function usePickerInput({ onCancel(); } }, 0); - } else { + } else if (open) { triggerOpen(false); + onSubmit(); } setFocused(false); From 60bc810bd3dab253c2f7ca442553f3e67e20b26e Mon Sep 17 00:00:00 2001 From: zombiej Date: Wed, 24 Jun 2020 10:52:11 +0800 Subject: [PATCH 2/3] clean up --- src/Picker.tsx | 13 +++++-------- 1 file changed, 5 insertions(+), 8 deletions(-) diff --git a/src/Picker.tsx b/src/Picker.tsx index bceb4d039..c91c4f50f 100644 --- a/src/Picker.tsx +++ b/src/Picker.tsx @@ -242,15 +242,12 @@ function InnerPicker(props: PickerProps) { } }; - const triggerOpen = (newOpen: boolean, preventChangeEvent: boolean = false) => { + const triggerOpen = (newOpen: boolean) => { if (disabled && newOpen) { return; } triggerInnerOpen(newOpen); - if (!newOpen && !preventChangeEvent) { - triggerChange(selectedValue); - } }; const forwardKeyDown = (e: React.KeyboardEvent) => { @@ -295,12 +292,12 @@ function InnerPicker(props: PickerProps) { } triggerChange(selectedValue); - triggerOpen(false, true); + triggerOpen(false); resetText(); return true; }, onCancel: () => { - triggerOpen(false, true); + triggerOpen(false); setSelectedValue(mergedValue); resetText(); }, @@ -400,7 +397,7 @@ function InnerPicker(props: PickerProps) { e.preventDefault(); e.stopPropagation(); triggerChange(null); - triggerOpen(false, true); + triggerOpen(false); }} className={`${prefixCls}-clear`} > @@ -422,7 +419,7 @@ function InnerPicker(props: PickerProps) { if (type === 'submit' || (type !== 'key' && !needConfirmButton)) { // triggerChange will also update selected values triggerChange(date); - triggerOpen(false, true); + triggerOpen(false); } }; const popupPlacement = direction === 'rtl' ? 'bottomRight' : 'bottomLeft'; From 61b33580014549834753e181b4590b339bbe4d36 Mon Sep 17 00:00:00 2001 From: zombiej Date: Wed, 24 Jun 2020 11:00:46 +0800 Subject: [PATCH 3/3] add test case --- src/Picker.tsx | 1 + src/RangePicker.tsx | 2 ++ src/hooks/usePickerInput.ts | 27 ++++++++++++++++++++++----- tests/range.spec.tsx | 9 +++++++++ 4 files changed, 34 insertions(+), 5 deletions(-) diff --git a/src/Picker.tsx b/src/Picker.tsx index c91c4f50f..5b5d37528 100644 --- a/src/Picker.tsx +++ b/src/Picker.tsx @@ -282,6 +282,7 @@ function InnerPicker(props: PickerProps) { const [inputProps, { focused, typing }] = usePickerInput({ blurToCancel: needConfirmButton, open: mergedOpen, + value: text, triggerOpen, forwardKeyDown, isClickOutside: target => diff --git a/src/RangePicker.tsx b/src/RangePicker.tsx index e607f93e2..5ca56f2a7 100644 --- a/src/RangePicker.tsx +++ b/src/RangePicker.tsx @@ -556,11 +556,13 @@ function InnerRangePicker(props: RangePickerProps) { const [startInputProps, { focused: startFocused, typing: startTyping }] = usePickerInput({ ...getSharedInputHookProps(0, resetStartText), open: startOpen, + value: startText, }); const [endInputProps, { focused: endFocused, typing: endTyping }] = usePickerInput({ ...getSharedInputHookProps(1, resetEndText), open: endOpen, + value: endText, }); // ============================= Sync ============================== diff --git a/src/hooks/usePickerInput.ts b/src/hooks/usePickerInput.ts index 2399411eb..f8f437f37 100644 --- a/src/hooks/usePickerInput.ts +++ b/src/hooks/usePickerInput.ts @@ -1,9 +1,11 @@ import * as React from 'react'; +import { useState, useEffect, useRef } from 'react'; import KeyCode from 'rc-util/lib/KeyCode'; import { addGlobalMouseDownEvent } from '../utils/uiUtil'; export default function usePickerInput({ open, + value, isClickOutside, triggerOpen, forwardKeyDown, @@ -14,6 +16,7 @@ export default function usePickerInput({ onBlur, }: { open: boolean; + value: string; isClickOutside: (clickElement: EventTarget | null) => boolean; triggerOpen: (open: boolean) => void; forwardKeyDown: (e: React.KeyboardEvent) => boolean; @@ -23,14 +26,16 @@ export default function usePickerInput({ onFocus?: React.FocusEventHandler; onBlur?: React.FocusEventHandler; }): [React.DOMAttributes, { focused: boolean; typing: boolean }] { - const [typing, setTyping] = React.useState(false); - const [focused, setFocused] = React.useState(false); + const [typing, setTyping] = useState(false); + const [focused, setFocused] = useState(false); /** * We will prevent blur to handle open event when user click outside, * since this will repeat trigger `onOpenChange` event. */ - const preventBlurRef = React.useRef(false); + const preventBlurRef = useRef(false); + + const valueChangedRef = useRef(false); const inputProps: React.DOMAttributes = { onMouseDown: () => { @@ -101,7 +106,10 @@ export default function usePickerInput({ }, 0); } else if (open) { triggerOpen(false); - onSubmit(); + + if (valueChangedRef.current) { + onSubmit(); + } } setFocused(false); @@ -111,8 +119,17 @@ export default function usePickerInput({ }, }; + // check if value changed + useEffect(() => { + valueChangedRef.current = false; + }, [open]); + + useEffect(() => { + valueChangedRef.current = true; + }, [value]); + // Global click handler - React.useEffect(() => + useEffect(() => addGlobalMouseDownEvent(({ target }: MouseEvent) => { if (open) { if (!isClickOutside(target)) { diff --git a/tests/range.spec.tsx b/tests/range.spec.tsx index f0a62082c..334b66497 100644 --- a/tests/range.spec.tsx +++ b/tests/range.spec.tsx @@ -1289,5 +1289,14 @@ describe('Picker.Range', () => { wrapper.closePicker(0); expect(wrapper.isOpen()).toBeFalsy(); }); + + it('not change: start not to end', () => { + const wrapper = mount( + , + ); + wrapper.openPicker(0); + wrapper.closePicker(0); + expect(wrapper.isOpen()).toBeFalsy(); + }); }); });