fix: Increase the priority of executing events in dateTime mode

react-component · Sep 18, 2023 · 213d2c5 · 213d2c5
1 parent 8f802d2
commit 213d2c5
Show file tree

Hide file tree

Showing 3 changed files with 12 additions and 8 deletions.
diff --git a/src/Picker.tsx b/src/Picker.tsx
@@ -325,6 +325,7 @@ function InnerPicker<DateType>(props: PickerProps<DateType>) {
 
  const [inputProps, { focused, typing }] = usePickerInput({
  blurToCancel: needConfirmButton,
+ changeOnBlur,
  open: mergedOpen,
  value: text,
  triggerOpen,

diff --git a/src/RangePicker.tsx b/src/RangePicker.tsx
@@ -573,13 +573,7 @@ function InnerRangePicker<DateType>(props: RangePickerProps<DateType>) {
 
  const onInternalBlur: React.FocusEventHandler<HTMLInputElement> = (e) => {
  if (delayOpen) {
- if (changeOnBlur) {
- const selectedIndexValue = getValue(selectedValue, mergedActivePickerIndex);
-
- if (selectedIndexValue) {
- triggerChange(selectedValue, mergedActivePickerIndex);
- }
- } else if (needConfirmButton) {
+ if (needConfirmButton) {
  // when in dateTime mode, switching between two date input fields will trigger onCalendarChange.
  // when onBlur is triggered, the input field has already switched, 
  // so it's necessary to obtain the value of the previous input field here.
@@ -589,6 +583,12 @@ function InnerRangePicker<DateType>(props: RangePickerProps<DateType>) {
  if (selectedIndexValue) {
  triggerChange(selectedValue, needTriggerIndex, true);
  }
+ } else if (changeOnBlur) {
+ const selectedIndexValue = getValue(selectedValue, mergedActivePickerIndex);
+
+ if (selectedIndexValue) {
+ triggerChange(selectedValue, mergedActivePickerIndex);
+ }
  }
  }
 
@@ -597,6 +597,7 @@ function InnerRangePicker<DateType>(props: RangePickerProps<DateType>) {
 
  const getSharedInputHookProps = (index: 0 | 1, resetText: () => void) => ({
  blurToCancel: !changeOnBlur && needConfirmButton,
+ changeOnBlur,
  forwardKeyDown,
  onBlur: onInternalBlur,
  isClickOutside: (target: EventTarget | null) => {

diff --git a/src/hooks/usePickerInput.ts b/src/hooks/usePickerInput.ts
@@ -12,6 +12,7 @@ export default function usePickerInput({
  forwardKeyDown,
  onKeyDown,
  blurToCancel,
+ changeOnBlur,
  onSubmit,
  onCancel,
  onFocus,
@@ -24,6 +25,7 @@ export default function usePickerInput({
  forwardKeyDown: (e: React.KeyboardEvent<HTMLInputElement>) => boolean;
  onKeyDown: (e: React.KeyboardEvent<HTMLInputElement>, preventDefault: () => void) => void;
  blurToCancel?: boolean;
+ changeOnBlur?: boolean
  onSubmit: () => void | boolean;
  onCancel: () => void;
  onFocus?: React.FocusEventHandler<HTMLInputElement>;
@@ -158,7 +160,7 @@ export default function usePickerInput({
  raf(() => {
  preventBlurRef.current = false;
  });
- } else if (!blurToCancel && (!focused || clickedOutside)) {
+ } else if (!changeOnBlur && !blurToCancel && (!focused || clickedOutside)) {
  triggerOpen(false);
  }
  }