From 9ad9e374e8e213b0000cd10917a31afc9a6f99bf Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Matilda=20Landstr=C3=B6m?=
 <matilda.landstrom@scandichotels.com>
Date: Thu, 27 Nov 2025 12:06:46 +0000
Subject: [PATCH] Merged in fix/LOY-398-fix-language-select (pull request
 #3227)

fix(LOY-398): fix language select by creating FormSelect wrapper

* fix(LOY-398): fix language select by creating FormSelect wrapper


Approved-by: Erik Tiekstra
Approved-by: Anton Gunnarsson
---
 .../Forms/Edit/Profile/FormContent/index.tsx  |  4 +--
 .../lib/components/Form/FormSelect/index.tsx  | 25 +++++++++++++++++++
 packages/design-system/package.json           |  1 +
 3 files changed, 28 insertions(+), 2 deletions(-)
 create mode 100644 packages/design-system/lib/components/Form/FormSelect/index.tsx

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 47900d8ee..bad502af6 100644
--- a/apps/scandic-web/components/Forms/Edit/Profile/FormContent/index.tsx
+++ b/apps/scandic-web/components/Forms/Edit/Profile/FormContent/index.tsx
@@ -7,7 +7,7 @@ import { Divider } from "@scandic-hotels/design-system/Divider"
 import CountrySelect from "@scandic-hotels/design-system/Form/Country"
 import DateSelect from "@scandic-hotels/design-system/Form/Date"
 import Phone from "@scandic-hotels/design-system/Form/Phone"
-import { Select } from "@scandic-hotels/design-system/Select"
+import { FormSelect } from "@scandic-hotels/design-system/Form/Select"
 import { Typography } from "@scandic-hotels/design-system/Typography"
 
 import { getLocalizedLanguageOptions } from "@/constants/languages"
@@ -133,7 +133,7 @@ export default function FormContent({ errors }: { errors: FieldErrors }) {
           name="phoneNumber"
           data-hj-suppress
         />
-        <Select
+        <FormSelect
           items={languageOptions}
           label={intl.formatMessage({
             id: "common.language",
diff --git a/packages/design-system/lib/components/Form/FormSelect/index.tsx b/packages/design-system/lib/components/Form/FormSelect/index.tsx
new file mode 100644
index 000000000..280261c47
--- /dev/null
+++ b/packages/design-system/lib/components/Form/FormSelect/index.tsx
@@ -0,0 +1,25 @@
+'use client'
+
+import { useController } from 'react-hook-form'
+
+import { Select } from '../../Select'
+
+import { SelectProps } from '../../Select/types'
+
+export function FormSelect({ label, items, name }: SelectProps) {
+  const { field, fieldState } = useController({
+    name,
+  })
+  return (
+    <Select
+      items={items}
+      label={label}
+      isInvalid={fieldState.invalid}
+      name={name}
+      onBlur={field.onBlur}
+      onSelectionChange={(c) => field.onChange(c ?? '')}
+      selectedKey={field.value}
+      data-testid={name}
+    />
+  )
+}
diff --git a/packages/design-system/package.json b/packages/design-system/package.json
index 1570a69dc..39747d590 100644
--- a/packages/design-system/package.json
+++ b/packages/design-system/package.json
@@ -30,6 +30,7 @@
     "./Form/Checkbox": "./lib/components/Form/Checkbox/index.tsx",
     "./Form/Country": "./lib/components/Form/Country/index.tsx",
     "./Form/Date": "./lib/components/Form/Date/index.tsx",
+    "./Form/Select": "./lib/components/Form/FormSelect/index.tsx",
     "./Form/ErrorMessage": "./lib/components/Form/ErrorMessage/index.tsx",
     "./Form/RadioButtonsGroup": "./lib/components/Form/RadioButtonsGroup/index.tsx",
     "./Form/PaymentOption": "./lib/components/Form/PaymentOption/PaymentOption.tsx",