fix(TimePicker): Fix input wrong number validation

.changeset/fix-DatePicker-input-wrong-number.md

@@ -0,0 +1,5 @@
+---
+'react-magma-dom': patch
+---
+
+fix(TimePicker): Fix input wrong number validation.

packages/react-magma-dom/src/components/TimePicker/TimePicker.test.js

@@ -35,18 +35,18 @@ describe('TimePicker', () => {
       expect(hoursInput.value).toEqual('12');
     });
 
-    it('should set the hour to the first number if the number inputted is 24 or above', () => {
+    it('should set the hour to the second number if the number inputted is 24 or above', () => {
       const { getByTestId } = render(<TimePicker label="label" />);
 
       const hoursInput = getByTestId('hoursTimeInput');
 
       fireEvent.change(hoursInput, { target: { value: '24' } });
 
-      expect(hoursInput.value).toEqual('02');
+      expect(hoursInput.value).toEqual('04');
 
       fireEvent.change(hoursInput, { target: { value: '34' } });
 
-      expect(hoursInput.value).toEqual('03');
+      expect(hoursInput.value).toEqual('04');
     });
 
     it('should set the hour to null if the backspace key is clicked', () => {
@@ -70,12 +70,12 @@ describe('TimePicker', () => {
       fireEvent.keyDown(hoursInput, { key: 'Backspace' });
 
       expect(onKeyDown).toHaveBeenCalled();
-    });    
-    
+    });
+
     it('should call the onChange when backspace is clicked on the hours input', () => {
       const onChange = jest.fn();
       const { getByTestId } = render(
-        <TimePicker label="label" onChange={onChange} value={'02:04 AM'}/>
+        <TimePicker label="label" onChange={onChange} value={'02:04 AM'} />
       );
 
       const hoursInput = getByTestId('hoursTimeInput');
@@ -141,18 +141,18 @@ describe('TimePicker', () => {
       expect(minutesInput.value).toEqual('34');
     });
 
-    it('should set the minute to the first number if the number inputted is 60 or above', () => {
+    it('should set the minute to the second number if the number inputted is 60 or above', () => {
       const { getByTestId } = render(<TimePicker label="label" />);
 
       const hoursInput = getByTestId('hoursTimeInput');
 
       fireEvent.change(hoursInput, { target: { value: '60' } });
 
-      expect(hoursInput.value).toEqual('06');
+      expect(hoursInput.value).toEqual('00');
 
       fireEvent.change(hoursInput, { target: { value: '89' } });
 
-      expect(hoursInput.value).toEqual('08');
+      expect(hoursInput.value).toEqual('09');
     });
 
     it('should set the minutes to null if the backspace key is clicked', () => {
@@ -163,7 +163,6 @@ describe('TimePicker', () => {
       fireEvent.keyDown(minutesInput, { key: 'Backspace' });
 
       expect(minutesInput.value).toEqual('');
-
     });
 
     it('should focus the hour input if the left arrow key is clicked', () => {
@@ -200,11 +199,11 @@ describe('TimePicker', () => {
 
       expect(onKeyDown).toHaveBeenCalled();
     });
-    
+
     it('should call the onChange when backspace is clicked on the minutes input', () => {
       const onChange = jest.fn();
       const { getByTestId } = render(
-        <TimePicker label="label" onChange={onChange} value={'02:04 AM'}/>
+        <TimePicker label="label" onChange={onChange} value={'02:04 AM'} />
       );
 
       const minsInput = getByTestId('minutesTimeInput');

packages/react-magma-dom/src/components/TimePicker/TimePicker.tsx

@@ -175,6 +175,7 @@ export const TimePicker = React.forwardRef<HTMLInputElement, TimePickerProps>(
             theme={theme}
             type="number"
             value={hour}
+            onFocus={e => e.target.select()}
           />
           <Divider> : </Divider>
           <StyledNumInput
@@ -193,6 +194,7 @@ export const TimePicker = React.forwardRef<HTMLInputElement, TimePickerProps>(
             theme={theme}
             type="number"
             value={minute}
+            onFocus={e => e.target.select()}
           />
           <AmPmToggle
             aria-label={amPmLabel}

packages/react-magma-dom/src/components/TimePicker/useTimePicker.ts

@@ -48,7 +48,7 @@ export function useTimePicker(props: UseTimePickerProps) {
   const id = useGenerateId(props.id);
 
   React.useEffect(() => {
-    if(typeof props.value === 'undefined') {
+    if (typeof props.value === 'undefined') {
       setHour('');
       setMinute('');
       setAmPm(am);
@@ -115,15 +115,45 @@ export function useTimePicker(props: UseTimePickerProps) {
     return newMinute.toString();
   }
 
+  const sanitizeMinute = (newMinute: string): number => {
+    if (Number(newMinute) > 59) {
+      return Number(newMinute.slice(2));
+    }
+
+    if (newMinute.length > 2) {
+      return Number(newMinute.slice(-2));
+    }
+
+    return Number(newMinute);
+  };
+
+  const sanitizeHour = (newHour: string): number => {
+    if (Number(newHour) > 12) {
+      return Number(newHour.slice(-1));
+    }
+
+    if (newHour.length > 2) {
+      if (Number(newHour) > 12) {
+        return Number(newHour.slice(-1));
+      }
+
+      return Number(newHour.slice(-2));
+    }
+
+    return Number(newHour);
+  };
+
   function handleHourChange(event: React.ChangeEvent<HTMLInputElement>) {
-    const newHour = calculateHour(Number(event.target.value));
+    const sanitizedHour = sanitizeHour(event.target.value);
+    const newHour = calculateHour(sanitizedHour);
 
     setHour(newHour);
     updateTime(`${newHour}:${minute} ${amPm}`);
   }
 
   function handleMinuteChange(event: React.ChangeEvent<HTMLInputElement>) {
-    const newMinute = calculateMinute(Number(event.target.value));
+    const sanitizedMinute = sanitizeMinute(event.target.value);
+    const newMinute = calculateMinute(sanitizedMinute);
 
     setMinute(newMinute);
     updateTime(`${hour}:${newMinute} ${amPm}`);