fix: implement manual clear via onChange detection instead of keyDown

alii13 · alii13 · commit 91955bd8ddd7 · 2025-10-31T10:36:21.000+05:30
- Changed approach per reviewer feedback (@zombieJ) - Detect manual clear in onChange event when input becomes empty - Only allow manual clear when clearIcon is present (allowClear enabled) - If allowClear is disabled, input resets to previous valid date - Works for all input methods (keyboard, paste, voice, etc) - No keyboard event detection needed - cleaner and more general Changes: - Input.tsx: Check clearIcon in onChange to allow/prevent manual clear - SingleSelector: Delegate to onClear when date is null and clearIcon exists - useInputProps: Trigger onChange(null) when text becomes empty - Tests: Updated to use fireEvent.change instead of keyDown - Added test for allowClear={false} behavior All 455 tests pass with 100% line coverage on new code
diff --git a/src/PickerInput/Selector/Input.tsx b/src/PickerInput/Selector/Input.tsx
@@ -142,10 +142,18 @@ const Input = React.forwardRef<InputRef, InputProps>((props, ref) => {
 
   // Directly trigger `onChange` if `format` is empty
   const onInternalChange: React.ChangeEventHandler<HTMLInputElement> = (event) => {
+    const text = event.target.value;
+
+    // Handle manual clear only when clearIcon is present (allowClear was enabled)
+    // If clearIcon is not set, reset back to previous valid date instead
+    if (text === '' && value !== '' && clearIcon) {
+      onChange('');
+      setInputValue('');
+      return;
+    }
+
     // Hack `onChange` with format to do nothing
     if (!format) {
-      const text = event.target.value;
-
       onModify(text);
       setInputValue(text);
       onChange(text);
@@ -212,36 +220,7 @@ const Input = React.forwardRef<InputRef, InputProps>((props, ref) => {
   });
 
   // ======================= Keyboard =======================
-  /**
-   * Handle manual clear when user selects all text and presses Delete/Backspace
-   * @returns true if input was cleared, false otherwise
-   */
-  const handleManualClear = (event: React.KeyboardEvent<HTMLInputElement>): boolean => {
-    const inputElement = inputRef.current;
-    if (
-      inputElement &&
-      inputElement.selectionStart === 0 &&
-      inputElement.selectionEnd === inputValue.length &&
-      inputValue.length > 0
-    ) {
-      onChange('');
-      setInputValue('');
-      // Prevent default browser behavior (e.g., navigation) after clearing
-      event.preventDefault();
-      return true;
-    }
-    return false;
-  };
-
   const onSharedKeyDown: React.KeyboardEventHandler<HTMLInputElement> = (event) => {
-    const { key } = event;
-
-    if ((key === 'Backspace' || key === 'Delete') && !format) {
-      if (handleManualClear(event)) {
-        return;
-      }
-    }
-
     if (event.key === 'Enter' && validateFormat(inputValue)) {
       onSubmit();
     }
@@ -293,9 +272,6 @@ const Input = React.forwardRef<InputRef, InputProps>((props, ref) => {
       // =============== Remove ===============
       case 'Backspace':
       case 'Delete':
-        if (handleManualClear(event)) {
-          return;
-        }
         nextCellText = '';
         nextFillText = cellFormat;
         break;
diff --git a/src/PickerInput/Selector/SingleSelector/index.tsx b/src/PickerInput/Selector/SingleSelector/index.tsx
@@ -130,14 +130,14 @@ function SingleSelector<DateType extends object = any>(
   const rootProps = useRootProps(restProps);
 
   // ======================== Change ========================
-  const handleSingleChange = (date: DateType | null) => {
-    if (date === null) {
-      // When date is null (from manual clear), delegate to onClear handler
-      // to properly trigger onChange and close the picker
+  const onSingleChange = (date: DateType | null) => {
+    if (date === null && clearIcon) {
+      // Only allow manual clear when clearIcon is present (allowClear was enabled)
       onClear?.();
-    } else {
+    } else if (date !== null) {
       onChange([date]);
     }
+    // If date is null but clearIcon is not set, do nothing - let it reset to previous value
   };
 
   const onMultipleRemove = (date: DateType) => {
@@ -156,7 +156,7 @@ function SingleSelector<DateType extends object = any>(
   const [getInputProps, getText] = useInputProps<DateType>(
     {
       ...props,
-      onChange: handleSingleChange,
+      onChange: onSingleChange,
     },
     ({ valueTexts }) => ({
       value: valueTexts[0] || '',
diff --git a/tests/manual-clear.spec.tsx b/tests/manual-clear.spec.tsx
@@ -16,69 +16,52 @@ describe('Picker.ManualClear', () => {
   });
 
   describe('Single Picker', () => {
-    it('should trigger onChange when manually clearing input (select all + delete)', async () => {
+    it('should trigger onChange when manually clearing input', async () => {
       const onChange = jest.fn();
       const { container } = render(
         <Picker
           generateConfig={dayGenerateConfig}
           value={getDay('2023-08-01')}
           onChange={onChange}
           locale={enUS}
+          allowClear
         />,
       );
 
       const input = container.querySelector('input') as HTMLInputElement;
 
       openPicker(container);
-      input.setSelectionRange(0, input.value.length);
-      fireEvent.keyDown(input, { key: 'Delete', code: 'Delete' });
+      fireEvent.change(input, { target: { value: '' } });
 
       await waitFakeTimer();
 
       expect(onChange).toHaveBeenCalledWith(null, null);
     });
 
-    it('should trigger onChange when manually clearing input (select all + backspace)', async () => {
+    it('should NOT clear when allowClear is disabled - reset to previous value', async () => {
       const onChange = jest.fn();
       const { container } = render(
         <Picker
           generateConfig={dayGenerateConfig}
           value={getDay('2023-08-01')}
           onChange={onChange}
           locale={enUS}
+          allowClear={false}
         />,
       );
 
       const input = container.querySelector('input') as HTMLInputElement;
 
-      openPicker(container);
-      input.setSelectionRange(0, input.value.length);
-      fireEvent.keyDown(input, { key: 'Backspace', code: 'Backspace' });
-
-      await waitFakeTimer();
-
-      expect(onChange).toHaveBeenCalledWith(null, null);
-    });
-
-    it('should trigger onChange when manually clearing via input change event', async () => {
-      const onChange = jest.fn();
-      const { container } = render(
-        <Picker
-          generateConfig={dayGenerateConfig}
-          value={getDay('2023-08-01')}
-          onChange={onChange}
-          locale={enUS}
-        />,
-      );
-
-      const input = container.querySelector('input') as HTMLInputElement;
+      expect(input.value).toBe('2023-08-01');
 
       openPicker(container);
       fireEvent.change(input, { target: { value: '' } });
+      fireEvent.blur(input);
 
       await waitFakeTimer();
 
-      expect(onChange).toHaveBeenCalledWith(null, null);
+      expect(onChange).not.toHaveBeenCalled();
+      expect(input.value).toBe('2023-08-01');
     });
 
     it('should reset invalid partial input on blur without triggering onChange', async () => {
@@ -115,14 +98,14 @@ describe('Picker.ManualClear', () => {
           onChange={onChange}
           locale={enUS}
           picker="month"
+          allowClear
         />,
       );
 
       const input = container.querySelector('input') as HTMLInputElement;
 
       openPicker(container);
-      input.setSelectionRange(0, input.value.length);
-      fireEvent.keyDown(input, { key: 'Delete', code: 'Delete' });
+      fireEvent.change(input, { target: { value: '' } });
 
       await waitFakeTimer();
 
@@ -137,23 +120,19 @@ describe('Picker.ManualClear', () => {
           value={getDay('2023-08-01')}
           onChange={onChange}
           locale={enUS}
+          allowClear
         />,
       );
 
       const input = container.querySelector('input') as HTMLInputElement;
 
       expect(input.value).toBe('2023-08-01');
 
-      // Open picker
       openPicker(container);
-
-      // Simulate selecting all text and delete
-      input.setSelectionRange(0, input.value.length);
-      fireEvent.keyDown(input, { key: 'Delete', code: 'Delete' });
+      fireEvent.change(input, { target: { value: '' } });
 
       await waitFakeTimer();
 
-      // Input should be empty
       expect(input.value).toBe('');
     });
 
@@ -166,14 +145,14 @@ describe('Picker.ManualClear', () => {
           onChange={onChange}
           locale={enUS}
           format={{ type: 'mask', format: 'YYYY-MM-DD' }}
+          allowClear
         />,
       );
 
       const input = container.querySelector('input') as HTMLInputElement;
 
       openPicker(container);
-      input.setSelectionRange(0, input.value.length);
-      fireEvent.keyDown(input, { key: 'Delete', code: 'Delete' });
+      fireEvent.change(input, { target: { value: '' } });
 
       await waitFakeTimer();
 
@@ -192,14 +171,14 @@ describe('Picker.ManualClear', () => {
           onChange={onChange}
           locale={enUS}
           needConfirm={false}
+          allowClear
         />,
       );
 
       const startInput = container.querySelectorAll('input')[0] as HTMLInputElement;
 
       openPicker(container, 0);
-      startInput.setSelectionRange(0, startInput.value.length);
-      fireEvent.keyDown(startInput, { key: 'Delete', code: 'Delete' });
+      fireEvent.change(startInput, { target: { value: '' } });
       fireEvent.blur(startInput);
 
       await waitFakeTimer();
@@ -216,14 +195,14 @@ describe('Picker.ManualClear', () => {
           onChange={onChange}
           locale={enUS}
           needConfirm={false}
+          allowClear
         />,
       );
 
       const endInput = container.querySelectorAll('input')[1] as HTMLInputElement;
 
       openPicker(container, 1);
-      endInput.setSelectionRange(0, endInput.value.length);
-      fireEvent.keyDown(endInput, { key: 'Delete', code: 'Delete' });
+      fireEvent.change(endInput, { target: { value: '' } });
       fireEvent.blur(endInput);
 
       await waitFakeTimer();
@@ -240,21 +219,20 @@ describe('Picker.ManualClear', () => {
           onChange={onChange}
           locale={enUS}
           needConfirm={false}
+          allowClear
         />,
       );
 
       const startInput = container.querySelectorAll('input')[0] as HTMLInputElement;
       const endInput = container.querySelectorAll('input')[1] as HTMLInputElement;
 
       openPicker(container, 0);
-      startInput.setSelectionRange(0, startInput.value.length);
-      fireEvent.keyDown(startInput, { key: 'Delete', code: 'Delete' });
+      fireEvent.change(startInput, { target: { value: '' } });
       fireEvent.blur(startInput);
       await waitFakeTimer();
 
       openPicker(container, 1);
-      endInput.setSelectionRange(0, endInput.value.length);
-      fireEvent.keyDown(endInput, { key: 'Delete', code: 'Delete' });
+      fireEvent.change(endInput, { target: { value: '' } });
       fireEvent.blur(endInput);
       await waitFakeTimer();
 
@@ -270,6 +248,7 @@ describe('Picker.ManualClear', () => {
           value={[getDay('2023-08-01'), getDay('2023-08-15')]}
           onChange={onChange}
           locale={enUS}
+          allowClear
         />,
       );
 
@@ -278,8 +257,7 @@ describe('Picker.ManualClear', () => {
       expect(startInput.value).toBe('2023-08-01');
 
       openPicker(container, 0);
-      startInput.setSelectionRange(0, startInput.value.length);
-      fireEvent.keyDown(startInput, { key: 'Delete', code: 'Delete' });
+      fireEvent.change(startInput, { target: { value: '' } });
 
       await waitFakeTimer();
 
@@ -304,8 +282,7 @@ describe('Picker.ManualClear', () => {
 
       const input1 = container1.querySelector('input') as HTMLInputElement;
       openPicker(container1);
-      input1.setSelectionRange(0, input1.value.length);
-      fireEvent.keyDown(input1, { key: 'Delete', code: 'Delete' });
+      fireEvent.change(input1, { target: { value: '' } });
       await waitFakeTimer();
 
       const { container: container2 } = render(
