fix: remove pattern prop on datepickers

that was causing some form validation to prevent submission, since the underlying value does not fit the pattern.
opengovsg · Nov 8, 2023 · 467e645 · 467e645
1 parent 6869ee8
commit 467e645
Show file tree

Hide file tree

Showing 2 changed files with 2 additions and 12 deletions.
diff --git a/react/src/DatePicker/components/DatePickerInput.tsx b/react/src/DatePicker/components/DatePickerInput.tsx
@@ -55,8 +55,7 @@ export const DatePickerInput = forwardRef<{}, 'input'>((_props, ref) => {
         {hasMounted ? (
           <Input
             size={size}
-            inputMode="numeric" // Nudge Android mobile keyboard to be numeric
-            pattern="\d*" // Nudge numeric keyboard on iOS Safari.
+            inputMode="numeric" // Nudge Android mobile keyboard to be numeric.
             as={ReactInputMask}
             mask="99/99/9999"
             value={internalInputValue}
@@ -70,12 +69,7 @@ export const DatePickerInput = forwardRef<{}, 'input'>((_props, ref) => {
             isReadOnly={fcProps.isReadOnly || !allowManualInput}
           />
         ) : (
-          <Input
-            pattern="\d*"
-            size={size}
-            inputMode="numeric"
-            placeholder={placeholder}
-          />
+          <Input size={size} inputMode="numeric" placeholder={placeholder} />
         )}
         <InputRightAddon p={0} border="none">
           <CalendarButton />

diff --git a/react/src/DateRangePicker/components/DateRangePickerInput.tsx b/react/src/DateRangePicker/components/DateRangePickerInput.tsx
@@ -75,7 +75,6 @@ export const DateRangePickerInput = forwardRef<{}, 'input'>((_props, ref) => {
             variant="unstyled"
             aria-label="Start date of range"
             inputMode="numeric" // Nudge Android mobile keyboard to be numeric
-            pattern="\d*" // Nudge numeric keyboard on iOS Safari.
             sx={styles.field}
             width="6rem"
             as={ReactInputMask}
@@ -95,7 +94,6 @@ export const DateRangePickerInput = forwardRef<{}, 'input'>((_props, ref) => {
             size={size}
             variant="unstyled"
             inputMode="numeric"
-            pattern="\d*"
             placeholder={placeholder}
             sx={styles.field}
             width="6rem"
@@ -108,7 +106,6 @@ export const DateRangePickerInput = forwardRef<{}, 'input'>((_props, ref) => {
             size={size}
             aria-label="Start date of range"
             inputMode="numeric" // Nudge Android mobile keyboard to be numeric
-            pattern="\d*" // Nudge numeric keyboard on iOS Safari.
             sx={styles.field}
             width="6rem"
             as={ReactInputMask}
@@ -128,7 +125,6 @@ export const DateRangePickerInput = forwardRef<{}, 'input'>((_props, ref) => {
             size={size}
             variant="unstyled"
             inputMode="numeric"
-            pattern="\d*"
             placeholder={placeholder}
             sx={styles.field}
             width="6rem"