fix: timepicker set default to AM

affects: @medly-components/core, @medly-components/forms
medly · Jun 19, 2024 · 2c7ce8f · 2c7ce8f
1 parent cbbd712
commit 2c7ce8f
Show file tree

Hide file tree

Showing 2 changed files with 15 additions and 6 deletions.
diff --git a/packages/core/src/components/TextField/getMaskedValue.ts b/packages/core/src/components/TextField/getMaskedValue.ts
@@ -31,12 +31,17 @@ export const getMaskedValue = (event: React.ChangeEvent<HTMLInputElement>, mask:
     let maskedValue;
 
     const specialCharsRegex = /[^a-zA-Z0-9]/g, //NOSONAR
-        { value, selectionStart } = event.target;
+        { value, selectionStart } = event.target,
+        // @ts-expect-error
+        { data } = event.nativeEvent;
 
-    //TODO: Need to remove this if, when we handle masking when user deletes from the middle of the text
     if (selectionStart !== null && selectionStart < value.length && value.length !== mask.length) {
-        // @ts-expect-error
-        maskedValue = `${value.slice(0, selectionStart)}${event.nativeEvent?.data === null ? ' ' : ''}${value.slice(selectionStart)}`;
+        maskedValue =
+            data === null
+                ? `${value.slice(0, selectionStart)} ${value.slice(selectionStart)}`
+                : value[selectionStart] === ' '
+                ? `${value.slice(0, selectionStart - 1)}${data}${value.slice(selectionStart + 1)}`
+                : `${value.slice(0, selectionStart)}${data}${value.slice(selectionStart)}`;
         return { maskedValue, selectionStart: specialCharsRegex.test(value[selectionStart]) ? selectionStart : selectionStart + 1 };
     } else {
         maskedValue = value

diff --git a/packages/core/src/components/TimePicker/TimePickerTextField/TimePickerTextField.tsx b/packages/core/src/components/TimePicker/TimePickerTextField/TimePickerTextField.tsx
@@ -49,7 +49,11 @@ const Component: FC<TimePickerTextFieldProps> = memo(
                 // Choose AM as default if user has not entered any value for period
                 if (length >= 7 && match) {
                     const [, hour, minutes] = match;
-                    hour >= '00' && hour <= '12' && minutes >= '00' && minutes <= '59' && props.onChange?.(`${hour}:${minutes}`);
+                    if (hour >= '00' && hour <= '12' && minutes >= '00' && minutes <= '59') {
+                        props.onChange?.(`${hour}:${minutes}`);
+                        setText(`${`0${Number(hour) % 12}`.slice(-2)} : ${`0${minutes}`.slice(-2)}  AM`);
+                        setKey(key => key + 1);
+                    }
                 } else if (length < 7) {
                     props.onChange?.('');
                 }
@@ -69,7 +73,7 @@ const Component: FC<TimePickerTextFieldProps> = memo(
                     (period.toUpperCase() === 'AM' || period.toUpperCase() === 'PM')
                 ) {
                     props.onChange?.(period.toUpperCase() === 'AM' ? `${hour}:${minutes}` : `${Number(hour) + 12}:${minutes}`);
-                    setText(`${`0${hour % 12}`.slice(-2)} : ${`0${minutes}`.slice(-2)}  ${period}`);
+                    setText(`${`0${Number(hour) % 12}`.slice(-2)} : ${`0${minutes}`.slice(-2)}  ${period}`);
                 } else {
                     props.onChange?.('');
                 }