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

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

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}
+    />
+  )
+}

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