Merged in fix/remove-filtering-date-country (pull request #2278)

fix: remove filtering from date and country select for better mobile experience

Approved-by: Linus Flood
Approved-by: Chuma Mcphoy (We Ahead)

apps/scandic-web/components/TempDesignSystem/Form/Country/CountryCombobox.tsx

@@ -0,0 +1,168 @@
+"use client"
+
+import { type SyntheticEvent, useMemo, useState } from "react"
+import {
+  Button,
+  ComboBox,
+  Input,
+  Label,
+  ListBox,
+  ListBoxItem,
+  Popover,
+  useFilter,
+} from "react-aria-components"
+import { useController } from "react-hook-form"
+import { useIntl } from "react-intl"
+
+import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon"
+import { Typography } from "@scandic-hotels/design-system/Typography"
+
+import { countries } from "@/constants/countries"
+
+import useLang from "@/hooks/useLang"
+
+import ErrorMessage from "../ErrorMessage"
+
+import styles from "./country.module.css"
+
+import type { CountryProps } from "./country"
+
+const prioCountryCode = ["DE", "DK", "FI", "NO", "SE"]
+
+export default function CountryCombobox({
+  // hack used since chrome does not respect autocomplete="off"
+  autoComplete = "nope",
+  className = "",
+  label,
+  name = "country",
+  readOnly = false,
+  registerOptions = {},
+}: CountryProps) {
+  const lang = useLang()
+  const intl = useIntl()
+
+  const { startsWith } = useFilter({ sensitivity: "base" })
+  const [filterValue, setFilterValue] = useState("")
+  const { field, formState, fieldState } = useController({
+    name,
+    rules: registerOptions,
+  })
+
+  const items = useMemo(() => {
+    function mapCountry(country: (typeof countries)[number]) {
+      return {
+        value: country.code,
+        label:
+          intl.formatDisplayName(country.code, { type: "region" }) ||
+          country.name,
+      }
+    }
+
+    const collator = new Intl.Collator(lang)
+    const prioCountries = countries
+      .filter((c) => prioCountryCode.includes(c.code))
+      .map(mapCountry)
+      .filter((item) => startsWith(item.label, filterValue))
+      .sort((a, b) => collator.compare(a.label, b.label))
+
+    const restCountries = countries
+      .filter((c) => !prioCountryCode.includes(c.code))
+      .map(mapCountry)
+      .filter((item) => startsWith(item.label, filterValue))
+      .sort((a, b) => collator.compare(a.label, b.label))
+
+    return [...prioCountries, ...restCountries]
+  }, [filterValue, intl, lang, startsWith])
+
+  function handleOnInput(evt: SyntheticEvent<HTMLInputElement>) {
+    setFilterValue(evt.currentTarget.value)
+    const isAutoCompleteEvent = !("inputType" in evt.nativeEvent)
+    if (isAutoCompleteEvent) {
+      const { value } = evt.currentTarget
+      const cc = countries.find((c) => c.name === value || c.code === value)
+      if (cc) {
+        field.onChange(cc.code)
+      }
+    }
+  }
+
+  return (
+    <div className={className}>
+      <ComboBox
+        aria-label={label}
+        className={styles.select}
+        data-testid={name}
+        isReadOnly={readOnly}
+        isRequired={Boolean(registerOptions?.required)}
+        isInvalid={fieldState.invalid}
+        name={name}
+        onBlur={field.onBlur}
+        onSelectionChange={(c) => field.onChange(c ?? "")}
+        selectedKey={field.value}
+        menuTrigger="focus"
+      >
+        <Label className={styles.inner}>
+          <span className={styles.displayText}>
+            <Typography variant="Label/xsRegular">
+              <span className={`${styles.label} ${styles.labelValue}`}>
+                {label}
+              </span>
+            </Typography>
+            <Typography variant="Body/Paragraph/mdRegular">
+              <span className={`${styles.label} ${styles.labelEmpty}`}>
+                {label}
+              </span>
+            </Typography>
+            <Typography variant="Body/Paragraph/mdRegular">
+              <Input
+                autoComplete={autoComplete}
+                className={styles.input}
+                onInput={handleOnInput}
+                ref={field.ref}
+              />
+            </Typography>
+          </span>
+          <Button className={styles.button}>
+            <MaterialIcon
+              aria-hidden="true"
+              className={styles.chevron}
+              color="Icon/Default"
+              icon="chevron_right"
+              size={24}
+            />
+          </Button>
+        </Label>
+        <Popover
+          className={styles.popover}
+          crossOffset={-8}
+          offset={22}
+          shouldFlip={false}
+        >
+          <ListBox className={styles.listBox}>
+            {items.map((item) => (
+              <ListBoxItem
+                className={styles.listBoxItem}
+                key={item.value}
+                id={item.value}
+                textValue={item.label}
+              >
+                {({ isSelected }) => (
+                  <Typography
+                    variant={
+                      isSelected
+                        ? "Body/Paragraph/mdBold"
+                        : "Body/Paragraph/mdRegular"
+                    }
+                  >
+                    <span>{item.label}</span>
+                  </Typography>
+                )}
+              </ListBoxItem>
+            ))}
+          </ListBox>
+        </Popover>
+      </ComboBox>
+      <ErrorMessage errors={formState.errors} name={name} />
+    </div>
+  )
+}

apps/scandic-web/components/TempDesignSystem/Form/Country/CountrySelect.tsx

@@ -0,0 +1,75 @@
+"use client"
+
+import { useMemo } from "react"
+import { useController } from "react-hook-form"
+import { useIntl } from "react-intl"
+
+import { Select } from "@scandic-hotels/design-system/Select"
+
+import { countries } from "@/constants/countries"
+
+import useLang from "@/hooks/useLang"
+
+import ErrorMessage from "../ErrorMessage"
+
+import type { CountryProps } from "./country"
+
+const prioCountryCode = ["DE", "DK", "FI", "NO", "SE"]
+
+export default function CountrySelect({
+  className = "",
+  label,
+  name = "country",
+  readOnly = false,
+  registerOptions = {},
+}: CountryProps) {
+  const lang = useLang()
+  const intl = useIntl()
+
+  const { field, formState, fieldState } = useController({
+    name,
+    rules: registerOptions,
+  })
+
+  const items = useMemo(() => {
+    function mapCountry(country: (typeof countries)[number]) {
+      return {
+        value: country.code,
+        label:
+          intl.formatDisplayName(country.code, { type: "region" }) ||
+          country.name,
+      }
+    }
+
+    const collator = new Intl.Collator(lang)
+    const prioCountries = countries
+      .filter((c) => prioCountryCode.includes(c.code))
+      .map(mapCountry)
+      .sort((a, b) => collator.compare(a.label, b.label))
+
+    const restCountries = countries
+      .filter((c) => !prioCountryCode.includes(c.code))
+      .map(mapCountry)
+      .sort((a, b) => collator.compare(a.label, b.label))
+
+    return [...prioCountries, ...restCountries]
+  }, [intl, lang])
+
+  return (
+    <div className={className}>
+      <Select
+        items={items}
+        label={label}
+        isReadOnly={readOnly}
+        isRequired={Boolean(registerOptions?.required)}
+        isInvalid={fieldState.invalid}
+        name={name}
+        onBlur={field.onBlur}
+        onSelectionChange={(c) => field.onChange(c ?? "")}
+        selectedKey={field.value}
+        data-testid={name}
+      />
+      <ErrorMessage errors={formState.errors} name={name} />
+    </div>
+  )
+}

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

@@ -1,168 +1,20 @@
 "use client"
 
-import { type SyntheticEvent, useMemo, useState } from "react"
+import { useMediaQuery } from "usehooks-ts"
-import {
-  Button,
-  ComboBox,
-  Input,
-  Label,
-  ListBox,
-  ListBoxItem,
-  Popover,
-  useFilter,
-} from "react-aria-components"
-import { useController } from "react-hook-form"
-import { useIntl } from "react-intl"
 
-import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon"
+import CountryCombobox from "./CountryCombobox"
-import { Typography } from "@scandic-hotels/design-system/Typography"
+import CountrySelect from "./CountrySelect"
-
-import { countries } from "@/constants/countries"
-
-import useLang from "@/hooks/useLang"
-
-import ErrorMessage from "../ErrorMessage"
-
-import styles from "./country.module.css"
 
 import type { CountryProps } from "./country"
 
-const prioCountryCode = ["DE", "DK", "FI", "NO", "SE"]
+export default function Country(props: CountryProps) {
-
+  const isDesktop = useMediaQuery("(min-width: 768px)", {
-export default function CountrySelect({
+    initializeWithValue: false,
-  // hack used since chrome does not respect autocomplete="off"
-  autoComplete = "nope",
-  className = "",
-  label,
-  name = "country",
-  readOnly = false,
-  registerOptions = {},
-}: CountryProps) {
-  const lang = useLang()
-  const intl = useIntl()
-
-  const { startsWith } = useFilter({ sensitivity: "base" })
-  const [filterValue, setFilterValue] = useState("")
-  const { field, formState, fieldState } = useController({
-    name,
-    rules: registerOptions,
   })
 
-  const items = useMemo(() => {
+  return isDesktop ? (
-    function mapCountry(country: (typeof countries)[number]) {
+    <CountryCombobox {...props} />
-      return {
+  ) : (
-        value: country.code,
+    <CountrySelect {...props} />
-        label:
-          intl.formatDisplayName(country.code, { type: "region" }) ||
-          country.name,
-      }
-    }
-
-    const collator = new Intl.Collator(lang)
-    const prioCountries = countries
-      .filter((c) => prioCountryCode.includes(c.code))
-      .map(mapCountry)
-      .filter((item) => startsWith(item.label, filterValue))
-      .sort((a, b) => collator.compare(a.label, b.label))
-
-    const restCountries = countries
-      .filter((c) => !prioCountryCode.includes(c.code))
-      .map(mapCountry)
-      .filter((item) => startsWith(item.label, filterValue))
-      .sort((a, b) => collator.compare(a.label, b.label))
-
-    return [...prioCountries, ...restCountries]
-  }, [filterValue, intl, lang, startsWith])
-
-  function handleOnInput(evt: SyntheticEvent<HTMLInputElement>) {
-    setFilterValue(evt.currentTarget.value)
-    const isAutoCompleteEvent = !("inputType" in evt.nativeEvent)
-    if (isAutoCompleteEvent) {
-      const { value } = evt.currentTarget
-      const cc = countries.find((c) => c.name === value || c.code === value)
-      if (cc) {
-        field.onChange(cc.code)
-      }
-    }
-  }
-
-  return (
-    <div className={className}>
-      <ComboBox
-        aria-label={label}
-        className={styles.select}
-        data-testid={name}
-        isReadOnly={readOnly}
-        isRequired={Boolean(registerOptions?.required)}
-        isInvalid={fieldState.invalid}
-        name={name}
-        onBlur={field.onBlur}
-        onSelectionChange={(c) => field.onChange(c ?? "")}
-        selectedKey={field.value}
-        menuTrigger="focus"
-      >
-        <Label className={styles.inner}>
-          <span className={styles.displayText}>
-            <Typography variant="Label/xsRegular">
-              <span className={`${styles.label} ${styles.labelValue}`}>
-                {label}
-              </span>
-            </Typography>
-            <Typography variant="Body/Paragraph/mdRegular">
-              <span className={`${styles.label} ${styles.labelEmpty}`}>
-                {label}
-              </span>
-            </Typography>
-            <Typography variant="Body/Paragraph/mdRegular">
-              <Input
-                autoComplete={autoComplete}
-                className={styles.input}
-                onInput={handleOnInput}
-                ref={field.ref}
-              />
-            </Typography>
-          </span>
-          <Button className={styles.button}>
-            <MaterialIcon
-              aria-hidden="true"
-              className={styles.chevron}
-              color="Icon/Default"
-              icon="chevron_right"
-              size={24}
-            />
-          </Button>
-        </Label>
-        <Popover
-          className={styles.popover}
-          crossOffset={-8}
-          offset={22}
-          shouldFlip={false}
-        >
-          <ListBox className={styles.listBox}>
-            {items.map((item) => (
-              <ListBoxItem
-                className={styles.listBoxItem}
-                key={item.value}
-                id={item.value}
-                textValue={item.label}
-              >
-                {({ isSelected }) => (
-                  <Typography
-                    variant={
-                      isSelected
-                        ? "Body/Paragraph/mdBold"
-                        : "Body/Paragraph/mdRegular"
-                    }
-                  >
-                    <span>{item.label}</span>
-                  </Typography>
-                )}
-              </ListBoxItem>
-            ))}
-          </ListBox>
-        </Popover>
-      </ComboBox>
-      <ErrorMessage errors={formState.errors} name={name} />
-    </div>
   )
 }

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

@@ -3,6 +3,7 @@ import { parseDate } from "@internationalized/date"
 import { useEffect } from "react"
 import { useController, useFormContext, useWatch } from "react-hook-form"
 import { useIntl } from "react-intl"
+import { useMediaQuery } from "usehooks-ts"
 
 import { Select } from "@scandic-hotels/design-system/Select"
 
@@ -20,6 +21,9 @@ import styles from "./date.module.css"
 export default function DateSelect({ name, registerOptions = {} }: DateProps) {
   const intl = useIntl()
   const lang = useLang()
+  const isDesktop = useMediaQuery("(min-width: 768px)", {
+    initializeWithValue: false,
+  })
 
   const { control, setValue, formState, watch } = useFormContext()
   const { field, fieldState } = useController({
@@ -126,7 +130,7 @@ export default function DateSelect({ name, registerOptions = {} }: DateProps) {
             name={DateName.day}
             onSelectionChange={(key) => setValue(DateName.day, Number(key))}
             isRequired
-            enableFiltering
+            enableFiltering={isDesktop}
             isInvalid={fieldState.invalid}
             onBlur={field.onBlur}
             defaultSelectedKey={dateValue?.day}
@@ -142,7 +146,7 @@ export default function DateSelect({ name, registerOptions = {} }: DateProps) {
             name={DateName.month}
             onSelectionChange={(key) => setValue(DateName.month, Number(key))}
             isRequired
-            enableFiltering
+            enableFiltering={isDesktop}
             isInvalid={fieldState.invalid}
             onBlur={field.onBlur}
             defaultSelectedKey={dateValue?.month}
@@ -158,7 +162,7 @@ export default function DateSelect({ name, registerOptions = {} }: DateProps) {
             name={DateName.year}
             onSelectionChange={(key) => setValue(DateName.year, Number(key))}
             isRequired
-            enableFiltering
+            enableFiltering={isDesktop}
             isInvalid={fieldState.invalid}
             onBlur={field.onBlur}
             defaultSelectedKey={dateValue?.year}

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

@@ -28,7 +28,7 @@ export function Select({
 }: SelectProps | SelectFilterProps) {
   const [isOpen, setIsOpen] = useState(false)
 
-  if ('enableFiltering' in props) {
+  if (props.enableFiltering) {
     return (
       <SelectFilter
         name={name}

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

@@ -17,6 +17,7 @@ export interface SelectProps extends ComponentProps<typeof Select> {
   name: string
   label: string
   onSelectionChange?: (key: Key | null) => void
+  enableFiltering?: false
 }
 
 export interface SelectItemProps extends ComponentProps<typeof ListBoxItem> {
@@ -32,5 +33,5 @@ export interface SelectFilterProps extends ComponentProps<typeof ComboBox> {
   name: string
   label: string
   onSelectionChange?: (key: Key | null) => void
-  enableFiltering: boolean
+  enableFiltering: true
 }