From 88492647905a3ca69e779bee8f77770b721d4e1c Mon Sep 17 00:00:00 2001 From: Nikita Orliak Date: Thu, 30 Jan 2025 12:35:00 +0100 Subject: [PATCH 1/3] fix(TimePicker): Fix input wrong number validation --- .../fix-DatePicker-input-wrong-number.md | 5 +++ .../components/TimePicker/useTimePicker.ts | 37 +++++++++++++++++-- 2 files changed, 39 insertions(+), 3 deletions(-) create mode 100644 .changeset/fix-DatePicker-input-wrong-number.md diff --git a/.changeset/fix-DatePicker-input-wrong-number.md b/.changeset/fix-DatePicker-input-wrong-number.md new file mode 100644 index 0000000000..d2b679bf8a --- /dev/null +++ b/.changeset/fix-DatePicker-input-wrong-number.md @@ -0,0 +1,5 @@ +--- +'react-magma-dom': patch +--- + +fix(TimePicker): Fix input wrong number validation. diff --git a/packages/react-magma-dom/src/components/TimePicker/useTimePicker.ts b/packages/react-magma-dom/src/components/TimePicker/useTimePicker.ts index 1c600d744b..e70253ec15 100644 --- a/packages/react-magma-dom/src/components/TimePicker/useTimePicker.ts +++ b/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,46 @@ export function useTimePicker(props: UseTimePickerProps) { return newMinute.toString(); } + const sanitizeMinute = (newMinute: string): number => { + if (Number(newMinute) > 99) { + return Number(newMinute.slice(2)); + } + + if (newMinute.length > 2) { + return Number(newMinute.slice(-2)); + } + + return Number(newMinute); + }; + + const sanitizeHour = (newHour: string): number => { + console.log(newHour); + if (Number(newHour) > 99) { + 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) { - 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) { - const newMinute = calculateMinute(Number(event.target.value)); + const sanitizedMinute = sanitizeMinute(event.target.value); + const newMinute = calculateMinute(sanitizedMinute); setMinute(newMinute); updateTime(`${hour}:${newMinute} ${amPm}`); From 83b182e4b36ca5e2d90e599d4350566354101802 Mon Sep 17 00:00:00 2001 From: Nikita Orliak Date: Tue, 4 Feb 2025 12:12:54 +0100 Subject: [PATCH 2/3] fix(TimePicker): add select on focus --- .../react-magma-dom/src/components/TimePicker/TimePicker.tsx | 2 ++ .../src/components/TimePicker/useTimePicker.ts | 5 ++--- 2 files changed, 4 insertions(+), 3 deletions(-) diff --git a/packages/react-magma-dom/src/components/TimePicker/TimePicker.tsx b/packages/react-magma-dom/src/components/TimePicker/TimePicker.tsx index e8333ef784..966b74a62b 100644 --- a/packages/react-magma-dom/src/components/TimePicker/TimePicker.tsx +++ b/packages/react-magma-dom/src/components/TimePicker/TimePicker.tsx @@ -175,6 +175,7 @@ export const TimePicker = React.forwardRef( theme={theme} type="number" value={hour} + onFocus={e => e.target.select()} /> : ( theme={theme} type="number" value={minute} + onFocus={e => e.target.select()} /> { - if (Number(newMinute) > 99) { + if (Number(newMinute) > 59) { return Number(newMinute.slice(2)); } @@ -128,8 +128,7 @@ export function useTimePicker(props: UseTimePickerProps) { }; const sanitizeHour = (newHour: string): number => { - console.log(newHour); - if (Number(newHour) > 99) { + if (Number(newHour) > 12) { return Number(newHour.slice(-1)); } From 48f8c6da6f3de709b0dc28bbc5abaa46b62131ef Mon Sep 17 00:00:00 2001 From: Nikita Orliak Date: Tue, 4 Feb 2025 12:26:18 +0100 Subject: [PATCH 3/3] fix(TimePicker): small tests change --- .../components/TimePicker/TimePicker.test.js | 23 +++++++++---------- 1 file changed, 11 insertions(+), 12 deletions(-) diff --git a/packages/react-magma-dom/src/components/TimePicker/TimePicker.test.js b/packages/react-magma-dom/src/components/TimePicker/TimePicker.test.js index 0eb90bb89a..f9996d37c0 100644 --- a/packages/react-magma-dom/src/components/TimePicker/TimePicker.test.js +++ b/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(); 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( - + ); 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(); 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( - + ); const minsInput = getByTestId('minutesTimeInput');