fix: add clearing state (#1960)

<!--
Hello 👋 Thank you for submitting a pull request.

To help us merge your PR, make sure to follow the instructions below:

- Create or update the tests
- Create or update the documentation at
https://github.com/strapi/documentation
- Refer to the issue you are closing in the PR description: Fix #issue
- Specify if the PR is ready to be merged or work in progress (by
opening a draft PR)

Please ensure you read the Contributing Guide:
https://github.com/strapi/strapi/blob/master/CONTRIBUTING.md
-->

### What does it do?

Clearing the `DateTimePicker` now clears on the first click without
flashing the old value. I added a “clearing” state so the internal
calendar resets before the next paint while the controlled value prop
catches up.

added test with it

### Why is it needed?

this should fix #1883

### How to test it?

launch stroybook, go to `DateTimePicker`, clear button should be
clearing date at first click now.

### Related issue(s)/PR(s)

#1883 

dx-2218

Author: HichamELBSI

.changeset/eight-foxes-check.md

@@ -0,0 +1,5 @@
+---
+'@strapi/design-system': major
+---
+
+fix clear button for DateTimePicker

packages/design-system/src/components/DateTimePicker/DateTimePicker.test.tsx

@@ -1,3 +1,5 @@
+import * as React from 'react';
+
 import { render as renderRTL } from '@test/utils';
 
 import { Field } from '../Field';
@@ -135,6 +137,42 @@ describe('DateTimePicker', () => {
       expect(onClear).toHaveBeenCalled();
     });
 
+    it('should clear a controlled value the first time the clear button is clicked', async () => {
+      const Controlled = () => {
+        const [value, setValue] = React.useState<Date | null>(new Date('12/01/2023 10:00'));
+
+        return (
+          <DateTimePicker
+            locale="en-GB"
+            value={value ?? undefined}
+            onChange={(date) => setValue(date ?? null)}
+            onClear={() => setValue(null)}
+          />
+        );
+      };
+
+      const { getByRole, user } = renderRTL(<Controlled />);
+
+      const dateInput = getByRole('combobox', { name: 'Choose date' });
+      const timeInput = getByRole('combobox', { name: 'Choose time' });
+
+      await user.click(dateInput);
+      await user.click(getByRole('gridcell', { name: /15/ }));
+
+      expect(dateInput).toHaveValue('15/12/2023');
+      expect(timeInput).toHaveValue('10:00');
+
+      await user.click(timeInput);
+      await user.click(getByRole('option', { name: /12:30/ }));
+
+      expect(timeInput).toHaveValue('12:30');
+
+      await user.click(getByRole('button', { name: 'clear date' }));
+
+      expect(dateInput).toHaveValue('');
+      expect(timeInput).toHaveValue('');
+    });
+
     it('should reset the value of the TimePicker to 00:00 when clicking on the clear button but not clear the DatePicker and not call onClear', async () => {
       const onClear = jest.fn();
       const { getByRole, user } = render({ onClear });
@@ -218,7 +256,9 @@ describe('DateTimePicker', () => {
       await user.click(getByRole('combobox', { name: 'Choose time' }));
       await user.click(getByRole('option', { name: /12:00/ }));
 
-      expect(onChange).toHaveBeenNthCalledWith(2, new Date('12/15/2023 12:00'));
+      expect(onChange).toHaveBeenNthCalledWith(2, new Date('12/15/2023'));
+      expect(onChange).toHaveBeenNthCalledWith(3, new Date('12/15/2023 12:00'));
+      expect(onChange).toHaveBeenCalledTimes(3);
     });
   });
 });

packages/design-system/src/components/DateTimePicker/DateTimePicker.tsx

@@ -5,6 +5,7 @@ import { CalendarDateTime, parseAbsoluteToLocal, toCalendarDateTime, getLocalTim
 import { useComposedRefs } from '../../hooks/useComposeRefs';
 import { useControllableState } from '../../hooks/useControllableState';
 import { useDateFormatter } from '../../hooks/useDateFormatter';
+import { useIsomorphicLayoutEffect } from '../../hooks/useIsomorphicLayoutEffect';
 import { Flex } from '../../primitives/Flex';
 import { useDesignSystem } from '../../utilities/DesignSystemProvider';
 import { DatePicker, DatePickerProps, DatePickerElement } from '../DatePicker/DatePicker';
@@ -52,9 +53,13 @@ export const DateTimePicker = React.forwardRef<DatePickerElement, DateTimePicker
   ) => {
     const DatePickerElement = React.useRef<HTMLInputElement>(null!);
 
+    const [isClearing, setIsClearing] = React.useState(false);
+
+    const externalCalendarDateValue = value ? convertUTCDateToCalendarDateTime(value, false) : undefined;
+
     const [dateValue, setDateValue] = useControllableState<CalendarDateTime | undefined>({
       defaultProp: initialDate ? convertUTCDateToCalendarDateTime(initialDate, false) : undefined,
-      prop: value ? convertUTCDateToCalendarDateTime(value, false) : value ?? undefined,
+      prop: isClearing ? undefined : externalCalendarDateValue,
       onChange(date) {
         if (onChange) {
           onChange(date?.toDate(getLocalTimeZone()));
@@ -72,20 +77,42 @@ export const DateTimePicker = React.forwardRef<DatePickerElement, DateTimePicker
 
     const timeValue = dateValue ? timeFormatter.format(dateValue.toDate(getLocalTimeZone())) : '';
 
+    const previousPropValueRef = React.useRef<DateTimePickerProps['value']>(value);
+
+    useIsomorphicLayoutEffect(() => {
+      if (isClearing && dateValue) {
+        setDateValue(undefined);
+      }
+    }, [isClearing, dateValue, setDateValue]);
+
+    useIsomorphicLayoutEffect(() => {
+      const previousValue = previousPropValueRef.current;
+      const hasClearedExternally = value == null && previousValue != null;
+
+      if (hasClearedExternally && dateValue) {
+        setDateValue(undefined);
+      }
+
+      if (isClearing && value !== previousValue) {
+        setIsClearing(false);
+      }
+
+      previousPropValueRef.current = value;
+    }, [value, dateValue, isClearing, setDateValue, setIsClearing]);
+
+    useIsomorphicLayoutEffect(() => {
+      if (isClearing && dateValue === undefined && value == null) {
+        setIsClearing(false);
+      }
+    }, [isClearing, dateValue, value, setIsClearing]);
+
     // React.useEffect(() => {
     //   setTimeTextValue((s) => (s === timeValue ? s : timeValue));
     // }, [timeValue]);
 
     const handleDateChange = (date: Date | undefined) => {
       let newDate = date ? convertUTCDateToCalendarDateTime(date) : undefined;
 
-      /**
-       * If the date hasn't changed, don't do anything.
-       */
-      if (newDate && dateValue && newDate.compare(dateValue) === 0) {
-        return;
-      }
-
       if (timeValue && newDate) {
         const [hours, minutes] = timeValue.split(':');
         newDate = newDate.set({ hour: parseInt(hours, 10), minute: parseInt(minutes, 10) });
@@ -111,8 +138,8 @@ export const DateTimePicker = React.forwardRef<DatePickerElement, DateTimePicker
     };
 
     const handleDateClear: DatePickerProps['onClear'] = (e) => {
-      setDateValue(undefined);
-      // setTimeTextValue('');
+      e.preventDefault();
+      setIsClearing(true);
 
       if (onClear) {
         onClear(e);