Open the combobox as soon as it's focused

Author: hasparus

src/app/conf/2025/schedule/_components/filters.tsx

@@ -5,8 +5,8 @@ import { Combobox } from "@headlessui/react"
 import { Tag } from "@/app/conf/_design-system/tag"
 import { Button } from "@/app/conf/_design-system/button"
 
-import CloseIcon from "@/app/conf/2025/pixelarticons/close.svg?svgr"
-import CaretDownIcon from "@/app/conf/2025/pixelarticons/caret-down.svg?svgr"
+import CloseIcon from "@/app/conf/_design-system/pixelarticons/close.svg?svgr"
+import CaretDownIcon from "@/app/conf/_design-system/pixelarticons/caret-down.svg?svgr"
 import { eventsColors } from "../../utils"
 type FiltersProps = {
   categories: { name: string; options: string[] }[]
@@ -92,10 +92,10 @@ function FiltersCombobox({
         )
 
   return (
-    <Combobox multiple nullable value={value} onChange={onChange}>
+    <Combobox immediate multiple value={value} onChange={onChange}>
       <div className={clsx("flex flex-col", className)}>
         {label && (
-          <Combobox.Label className="typography-menu mb-1 block font-mono font-medium uppercase text-neu-900">
+          <Combobox.Label className="mb-1 block font-mono font-medium uppercase text-neu-900 typography-menu">
             {label}
           </Combobox.Label>
         )}
@@ -104,7 +104,7 @@ function FiltersCombobox({
             value={query}
             onChange={e => setQuery(e.target.value)}
             className={clsx(
-              "typography-body-sm bg-transparent leading-none text-neu-800 !outline-offset-0 [text-box:trim-both_cap_alphabetic] max-lg:typography-body-md placeholder:text-neu-600 focus:outline-none",
+              "bg-transparent leading-none text-neu-800 !outline-offset-0 typography-body-sm [text-box:trim-both_cap_alphabetic] placeholder:text-neu-600 focus:outline-none max-lg:typography-body-md",
             )}
             placeholder={placeholder}
             autoComplete="true"
@@ -206,7 +206,7 @@ function FilterComboboxOption({
   return (
     <div
       className={clsx(
-        "typography-body-sm relative flex cursor-default select-none items-center p-1 font-sans",
+        "relative flex cursor-default select-none items-center p-1 font-sans typography-body-sm",
         active && "bg-neu-100 dark:bg-neu-50",
       )}
     >

src/app/conf/2025/schedule/_components/schedule-session-card.tsx

@@ -4,7 +4,7 @@ import { SchedSpeaker } from "@/app/conf/2023/types"
 import { Anchor } from "@/app/conf/_design-system/anchor"
 import { Tag } from "@/app/conf/_design-system/tag"
 
-import { PinIcon } from "../../pixelarticons/pin-icon"
+import { PinIcon } from "@/app/conf/_design-system/pixelarticons/pin-icon"
 
 import { type ScheduleSession } from "./session-list"
 import { getEventTitle } from "../../utils"
@@ -85,7 +85,7 @@ export function ScheduleSessionCard({
                 ))}
               </span>
             )}
-            <span className="typography-body-xs mt-2 flex items-center gap-0.5">
+            <span className="mt-2 flex items-center gap-0.5 typography-body-xs">
               <PinIcon className="size-4 text-pri-base" />
               {session.venue}
             </span>