From d01db033aefbe43753a22c2763ca7ad1eaf6bc88 Mon Sep 17 00:00:00 2001
From: Christian Andolf <christian.andolf@scandichotels.com>
Date: Thu, 12 Jun 2025 11:10:27 +0200
Subject: [PATCH] fix(LOY-251): numeric inputmode on inputs for mobile numeric
 keyboard

---
 .../components/Forms/Edit/Profile/FormContent/index.tsx      | 1 +
 apps/scandic-web/components/Forms/Signup/index.tsx           | 1 +
 .../EnterDetails/Details/RoomOne/Signup/index.tsx            | 1 +
 .../components/TempDesignSystem/Form/Date/index.tsx          | 2 ++
 .../components/TempDesignSystem/Form/Input/index.tsx         | 2 ++
 .../design-system/lib/components/Select/SelectFilter.tsx     | 2 ++
 packages/design-system/lib/components/Select/types.ts        | 5 +++--
 7 files changed, 12 insertions(+), 2 deletions(-)

diff --git a/apps/scandic-web/components/Forms/Edit/Profile/FormContent/index.tsx b/apps/scandic-web/components/Forms/Edit/Profile/FormContent/index.tsx
index 08d9c0f6c..68a760064 100644
--- a/apps/scandic-web/components/Forms/Edit/Profile/FormContent/index.tsx
+++ b/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}
diff --git a/apps/scandic-web/components/Forms/Signup/index.tsx b/apps/scandic-web/components/Forms/Signup/index.tsx
index 6562a05ea..32a217867 100644
--- a/apps/scandic-web/components/Forms/Signup/index.tsx
+++ b/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}
diff --git a/apps/scandic-web/components/HotelReservation/EnterDetails/Details/RoomOne/Signup/index.tsx b/apps/scandic-web/components/HotelReservation/EnterDetails/Details/RoomOne/Signup/index.tsx
index 8b28f35c8..7cb6724c2 100644
--- a/apps/scandic-web/components/HotelReservation/EnterDetails/Details/RoomOne/Signup/index.tsx
+++ b/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>
diff --git a/apps/scandic-web/components/TempDesignSystem/Form/Date/index.tsx b/apps/scandic-web/components/TempDesignSystem/Form/Date/index.tsx
index 5d57c889e..21dbf6f1b 100644
--- a/apps/scandic-web/components/TempDesignSystem/Form/Date/index.tsx
+++ b/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>
diff --git a/apps/scandic-web/components/TempDesignSystem/Form/Input/index.tsx b/apps/scandic-web/components/TempDesignSystem/Form/Input/index.tsx
index 18a737e44..a7b538631 100644
--- a/apps/scandic-web/components/TempDesignSystem/Form/Input/index.tsx
+++ b/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">
diff --git a/packages/design-system/lib/components/Select/SelectFilter.tsx b/packages/design-system/lib/components/Select/SelectFilter.tsx
index 473798b51..7c80e1b4a 100644
--- a/packages/design-system/lib/components/Select/SelectFilter.tsx
+++ b/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>
diff --git a/packages/design-system/lib/components/Select/types.ts b/packages/design-system/lib/components/Select/types.ts
index f5351c6da..027f506d1 100644
--- a/packages/design-system/lib/components/Select/types.ts
+++ b/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[]