feat(select): select component dismisses on blur

Author: thejackshelton

apps/website/src/routes/docs/headless/select/select.spec.ts

@@ -171,6 +171,21 @@ test.describe('Keyboard Behavior', () => {
       await expect(getListbox()).toBeHidden();
       await expect(getTrigger()).toHaveAttribute('aria-expanded', 'false');
     });
+
+    test(`GIVEN a hero select with an opened listbox
+          WHEN focusing something outside of the hero select's trigger
+          THEN the listbox should close
+          AND aria-expanded should be false`, async ({ page }) => {
+      const { getTrigger, getListbox, openListbox } = await setup(
+        page,
+        'select-hero-test',
+      );
+
+      await openListbox('Enter');
+      await getTrigger().press('Tab');
+      await expect(getListbox()).toBeHidden();
+      await expect(getTrigger()).toHaveAttribute('aria-expanded', 'false');
+    });
   });
 
   test.describe('data-highlighted navigation', () => {

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

@@ -74,12 +74,17 @@ export const SelectTrigger = component$<SelectTriggerProps>((props) => {
     }
   });
 
+  const handleBlur$ = $(() => {
+    context.isListboxOpenSig.value = false;
+  });
+
   return (
     <button
       {...props}
       ref={context.triggerRef}
       onClick$={[handleClick$, props.onClick$]}
       onKeyDown$={[handleKeyDownSync$, handleKeyDown$, props.onKeyDown$]}
+      onBlur$={[handleBlur$, props.onBlur$]}
       data-open={context.isListboxOpenSig.value ? '' : undefined}
       data-closed={!context.isListboxOpenSig.value ? '' : undefined}
       aria-expanded={context.isListboxOpenSig.value}