fix: date and country selects now still uses the filtering in desktop

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,6 +130,7 @@ export default function DateSelect({ name, registerOptions = {} }: DateProps) {
             name={DateName.day}
             onSelectionChange={(key) => setValue(DateName.day, Number(key))}
             isRequired
+            enableFiltering={isDesktop}
             isInvalid={fieldState.invalid}
             onBlur={field.onBlur}
             defaultSelectedKey={dateValue?.day}
@@ -141,6 +146,7 @@ export default function DateSelect({ name, registerOptions = {} }: DateProps) {
             name={DateName.month}
             onSelectionChange={(key) => setValue(DateName.month, Number(key))}
             isRequired
+            enableFiltering={isDesktop}
             isInvalid={fieldState.invalid}
             onBlur={field.onBlur}
             defaultSelectedKey={dateValue?.month}
@@ -156,6 +162,7 @@ export default function DateSelect({ name, registerOptions = {} }: DateProps) {
             name={DateName.year}
             onSelectionChange={(key) => setValue(DateName.year, Number(key))}
             isRequired
+            enableFiltering={isDesktop}
             isInvalid={fieldState.invalid}
             onBlur={field.onBlur}
             defaultSelectedKey={dateValue?.year}