Merged in fix/LOY-251-numeric-inputmode (pull request #2346)

fix(LOY-251): numeric inputmode on inputs for mobile numeric keyboard

Approved-by: Chuma Mcphoy (We Ahead)

apps/scandic-web/components/Forms/Edit/Profile/FormContent/index.tsx

@@ -73,6 +73,7 @@ export default function FormContent() {
             label={zipCode}
             name="address.zipCode"
             registerOptions={{ required: true }}
+            inputMode="numeric"
           />
           <CountrySelect
             label={country}

apps/scandic-web/components/Forms/Signup/index.tsx

@@ -161,6 +161,7 @@ export default function SignupForm({ title }: SignUpFormProps) {
                 label={zipCode}
                 name="address.zipCode"
                 registerOptions={{ required: true }}
+                inputMode="numeric"
               />
               <CountrySelect
                 label={country}

apps/scandic-web/components/HotelReservation/EnterDetails/Details/RoomOne/Signup/index.tsx

@@ -37,6 +37,7 @@ export default function Signup({
           defaultMessage: "Zip code",
         })}
         registerOptions={{ required: true, ...registerOptions }}
+        inputMode="numeric"
       />
       <div className={styles.dateField}>
         <header>

apps/scandic-web/components/TempDesignSystem/Form/Date/index.tsx

@@ -134,6 +134,7 @@ export default function DateSelect({ name, registerOptions = {} }: DateProps) {
             isInvalid={fieldState.invalid}
             onBlur={field.onBlur}
             defaultSelectedKey={dateValue?.day}
+            inputMode="numeric"
             data-testid={DateName.day}
           />
         </div>
@@ -166,6 +167,7 @@ export default function DateSelect({ name, registerOptions = {} }: DateProps) {
             isInvalid={fieldState.invalid}
             onBlur={field.onBlur}
             defaultSelectedKey={dateValue?.year}
+            inputMode="numeric"
             data-testid={DateName.year}
           />
         </div>

apps/scandic-web/components/TempDesignSystem/Form/Input/index.tsx

@@ -31,6 +31,7 @@ const Input = forwardRef<HTMLInputElement, InputProps>(function Input(
     registerOptions = {},
     type = "text",
     hideError,
+    inputMode,
   },
   ref
 ) {
@@ -74,6 +75,7 @@ const Input = forwardRef<HTMLInputElement, InputProps>(function Input(
             readOnly={readOnly}
             required={!!registerOptions.required}
             type={type}
+            inputMode={inputMode}
           />
           {helpText && !fieldState.error ? (
             <Caption asChild color="black">