fix(select): will only blur outside of listbox

Author: thejackshelton

apps/website/src/routes/docs/headless/select/examples/controlled.tsx

@@ -0,0 +1,30 @@
+import { component$, useSignal } from '@builder.io/qwik';
+import {
+  Select,
+  SelectListbox,
+  SelectOption,
+  SelectTrigger,
+  SelectValue,
+} from '@qwik-ui/headless';
+
+export default component$(() => {
+  const usersSig = useSignal<string[]>(['Tim', 'Ryan', 'Jim', 'Jessie', 'Abby']);
+
+  return (
+    <Select value="Jessie" class="relative min-w-40">
+      <SelectTrigger class="w-full border-2 border-dashed border-red-400">
+        <SelectValue placeholder="Select an option" />
+      </SelectTrigger>
+      <SelectListbox class="absolute w-full border-2 border-dashed border-green-400 bg-slate-900 p-2">
+        {usersSig.value.map((user) => (
+          <SelectOption
+            class="border-dashed border-blue-400 data-[highlighted]:border-2"
+            key={user}
+          >
+            {user}
+          </SelectOption>
+        ))}
+      </SelectListbox>
+    </Select>
+  );
+});

packages/kit-headless/src/components/select/select-trigger.tsx

@@ -74,8 +74,14 @@ export const SelectTrigger = component$<SelectTriggerProps>((props) => {
     }
   });
 
-  const handleBlur$ = $(() => {
-    context.isListboxOpenSig.value = false;
+  const handleBlur$ = $((event: FocusEvent) => {
+    const focusOutsideListbox = !context.listboxRef.value?.contains(
+      event.relatedTarget as Element,
+    );
+
+    if (focusOutsideListbox) {
+      context.isListboxOpenSig.value = false;
+    }
   });
 
   return (