[@mantine/dates] TimePicker: Fix clearing in uncontrolled mode not updating to empty value (#8622)

* [@mantine/dates] TimePicker: Fix TimePicker clearing in uncontrolled mode not propagating empty value #8606

* [@mantine/dates] TimePicker: Fix TimePicker clearing in uncontrolled mode not propagating empty value #8606

* Update packages/@mantine/dates/src/components/TimePicker/use-time-picker.ts

Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>

---------

Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>

Author: pggggggggh

packages/@mantine/dates/src/components/TimePicker/TimePicker.test.tsx

@@ -93,6 +93,17 @@ describe('@mantine/dates/TimePicker', () => {
     expect(screen.getByLabelText('test-hours')).toHaveValue('08');
   });
 
+  it('calls onChange when cleared with backspace in uncontrolled mode', async () => {
+    const spy = jest.fn();
+    render(<TimePicker {...defaultProps} defaultValue="12:34" onChange={spy} />);
+
+    await userEvent.click(screen.getByLabelText('test-hours'));
+    await userEvent.type(document.activeElement!, '{backspace}');
+
+    expect(spy).toHaveBeenCalledTimes(1);
+    expect(spy).toHaveBeenLastCalledWith('');
+  });
+
   it('handles left/right arrow keys correctly', async () => {
     render(<TimePicker {...defaultProps} withSeconds format="24h" />);
 

packages/@mantine/dates/src/components/TimePicker/use-time-picker.ts

@@ -44,7 +44,18 @@ export function useTimePicker({
     format,
   });
 
+  const initialTimeString = getTimeString({
+    hours: parsedTime.hours,
+    minutes: parsedTime.minutes,
+    seconds: parsedTime.seconds,
+    format,
+    withSeconds,
+    amPm: parsedTime.amPm,
+    amPmLabels,
+  });
+
   const acceptChange = useRef(true);
+  const wasInvalidBefore = useRef(!initialTimeString.valid);
 
   const [hours, setHours] = useState<number | null>(parsedTime.hours);
   const [minutes, setMinutes] = useState<number | null>(parsedTime.minutes);
@@ -87,6 +98,7 @@ export function useTimePicker({
 
     if (timeString.valid) {
       acceptChange.current = false;
+      wasInvalidBefore.current = false;
       if (field === 'hours') {
         setHours(val);
       }
@@ -103,8 +115,9 @@ export function useTimePicker({
       onChange?.(timeString.value);
     } else {
       acceptChange.current = false;
-      if (typeof value === 'string' && value !== '') {
+      if (!wasInvalidBefore.current) {
         onChange?.('');
+        wasInvalidBefore.current = true;
       }
     }
   };
@@ -118,6 +131,8 @@ export function useTimePicker({
     setSeconds(parsedTime.seconds);
     setAmPm(parsedTime.amPm);
 
+    const next = getTimeString({ ...parsedTime, format, withSeconds, amPmLabels });
+    wasInvalidBefore.current = !next.valid;
     onChange?.(timeString);
   };
 
@@ -157,6 +172,7 @@ export function useTimePicker({
     setSeconds(null);
     setAmPm(null);
     onChange?.('');
+    wasInvalidBefore.current = true;
     focus('hours');
   };