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">

packages/design-system/lib/components/Select/SelectFilter.tsx

@@ -93,6 +93,7 @@ export function SelectFilter({
   onFocus = () => undefined,
   onBlur = () => undefined,
   autoComplete,
+  inputMode,
   ...props
 }: SelectFilterProps) {
   const [focus, setFocus] = useState(false)
@@ -146,6 +147,7 @@ export function SelectFilter({
                 ref={inputRef}
                 className={styles.input}
                 autoComplete={autoComplete}
+                inputMode={inputMode}
               />
             </Typography>
           </span>

packages/design-system/lib/components/Select/types.ts

@@ -1,4 +1,4 @@
-import { ComponentProps } from 'react'
+import { ComponentProps, InputHTMLAttributes } from 'react'
 import { ComboBox, Key, ListBoxItem, Select } from 'react-aria-components'
 import { MaterialIconProps } from '../Icons/MaterialIcon'
 
@@ -26,7 +26,8 @@ export interface SelectItemProps extends ComponentProps<typeof ListBoxItem> {
 }
 
 export interface SelectFilterProps extends ComponentProps<typeof ComboBox> {
-  autoComplete?: string
+  autoComplete?: InputHTMLAttributes<HTMLInputElement>['autoComplete']
+  inputMode?: InputHTMLAttributes<HTMLInputElement>['inputMode']
   icon?: MaterialIconProps['icon']
   itemIcon?: MaterialIconProps['icon']
   items: Item[]