feat(select): better dismiss handling

Author: thejackshelton

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

@@ -117,6 +117,20 @@ test.describe('Mouse Behavior', () => {
   //   await getTrigger().blur();
   //   await expect(getTrigger()).toBeFocused();
   // });
+
+  test(`GIVEN an open hero select
+        WHEN clikcking on the group label
+        THEN the listbox should remain open`, async ({ page }) => {
+    const { getRoot, openListbox, getListbox } = await setup(page, 'select-group-test');
+
+    await openListbox('click');
+
+    const label = getRoot().getByRole('listitem').first();
+
+    await expect(label).toBeVisible();
+    await label.click();
+    await expect(getListbox()).toBeVisible();
+  });
 });
 
 test.describe('Keyboard Behavior', () => {

packages/kit-headless/src/components/select/notes.md

@@ -62,6 +62,7 @@ resource: https://joshwayne.com/posts/the-problem-with-dropdowns/
     - [x] Typeahead support (user typing / filter)
     - [x] Looping
     - [ ] RTL support
+    - [ ] Form support
     - [x] Scrollable
     - [x] Aria (controls, roles, etc)
 

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

@@ -1,4 +1,4 @@
-import { type JSXNode, type FunctionComponent } from '@builder.io/qwik';
+import { type JSXNode, Component } from '@builder.io/qwik';
 import { SelectImpl, type SelectProps } from './select';
 import { SelectListbox } from './select-listbox';
 import { SelectOption } from './select-option';
@@ -13,7 +13,7 @@ export type Opt = {
     This is an inline component. We create an inline component to get the proper indexes with CSR. See issue #4757 
     for more information.
 */
-export const Select: FunctionComponent<SelectProps> = (props) => {
+export const Select: Component<SelectProps> = (props: SelectProps) => {
   const { children: myChildren, ...rest } = props;
   let valuePropIndex = null;
   const childrenToProcess = (

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

@@ -1,4 +1,12 @@
-import { component$, useStyles$, Slot, type PropsOf, useContext } from '@builder.io/qwik';
+import {
+  component$,
+  useStyles$,
+  Slot,
+  type PropsOf,
+  useContext,
+  useOnDocument,
+  $,
+} from '@builder.io/qwik';
 import SelectContextId from './select-context';
 import styles from './select.css?inline';
 
@@ -9,6 +17,34 @@ export const SelectListbox = component$<SelectListboxProps>((props) => {
 
   const context = useContext(SelectContextId);
   const listboxId = `${context.localId}-listbox`;
+
+  const isOutside = $((rect: DOMRect, x: number, y: number) => {
+    return x < rect.left || x > rect.right || y < rect.top || y > rect.bottom;
+  });
+
+  const handleDismiss$ = $(async (e: PointerEvent) => {
+    if (!context.isListboxOpenSig.value) {
+      return;
+    }
+
+    if (!context.listboxRef.value || !context.triggerRef.value) {
+      return;
+    }
+
+    const listboxRect = context.listboxRef.value.getBoundingClientRect();
+    const triggerRect = context.triggerRef.value.getBoundingClientRect();
+    const { clientX, clientY } = e;
+
+    const isOutsideListbox = await isOutside(listboxRect, clientX, clientY);
+    const isOutsideTrigger = await isOutside(triggerRect, clientX, clientY);
+
+    if (isOutsideListbox && isOutsideTrigger) {
+      context.isListboxOpenSig.value = false;
+    }
+  });
+
+  useOnDocument('pointerdown', handleDismiss$);
+
   return (
     <ul
       {...props}

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

@@ -8,7 +8,7 @@ import {
   useTask$,
   type PropsOf,
 } from '@builder.io/qwik';
-import { isServer } from '@builder.io/qwik/build';
+import { isServer, isBrowser } from '@builder.io/qwik/build';
 import SelectContextId from './select-context';
 
 export type SelectOptionProps = PropsOf<'li'> & {
@@ -57,7 +57,7 @@ export const SelectOption = component$<SelectOptionProps>((props) => {
 
     cleanup(() => observer?.disconnect());
 
-    if (typeof window !== 'undefined') {
+    if (isBrowser) {
       observer = new IntersectionObserver(checkVisibility, {
         root: context.listboxRef.value,
         threshold: 1.0,

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

@@ -117,7 +117,10 @@ export const SelectTrigger = component$<SelectTriggerProps>((props) => {
     }
 
     if (context.isListboxOpenSig.value && !shouldOpen) {
-      console.log('heyyy');
+      if (e.key === 'Tab') {
+        context.isListboxOpenSig.value = false;
+      }
+
       // select options
       if (e.key === 'Enter' || e.key === ' ') {
         context.selectedIndexSig.value = context.highlightedIndexSig.value;
@@ -145,26 +148,16 @@ export const SelectTrigger = component$<SelectTriggerProps>((props) => {
     }
   });
 
-  const handleBlur$ = $((event: FocusEvent) => {
-    const focusOutsideListbox = !context.listboxRef.value?.contains(
-      event.relatedTarget as Element,
-    );
-
-    if (focusOutsideListbox) {
-      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}
+      preventdefault:blur
     >
       <Slot />
     </button>

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

@@ -16,7 +16,7 @@ import { Opt } from './select-inline';
 import { isBrowser } from '@builder.io/qwik/build';
 import { getActiveDescendant } from './utils';
 
-export type SelectProps = Omit<PropsOf<'div'>, 'onChange$'> & {
+export type SelectProps = PropsOf<'div'> & {
   value?: string;
   'bind:value'?: Signal<string>;
 
@@ -34,7 +34,7 @@ export type SelectProps = Omit<PropsOf<'div'>, 'onChange$'> & {
 };
 
 /* root component in select-inline.tsx */
-export const SelectImpl = component$<SelectProps>((props) => {
+export const SelectImpl = component$<SelectProps>((props: SelectProps) => {
   // refs
   const rootRef = useSignal<HTMLDivElement>();
   const triggerRef = useSignal<HTMLButtonElement>();
@@ -113,29 +113,26 @@ export const SelectImpl = component$<SelectProps>((props) => {
   useContextProvider(SelectContextId, context);
 
   return (
-    <>
-      {/* @ts-expect-error Qwik expects onChange$ types */}
-      <div
-        role="combobox"
-        ref={rootRef}
-        data-open={context.isListboxOpenSig.value ? '' : undefined}
-        data-closed={!context.isListboxOpenSig.value ? '' : undefined}
-        aria-activedescendant={
-          context.isListboxOpenSig.value
-            ? getActiveDescendant(
-                context.highlightedIndexSig.value ?? -1,
-                context.optionsSig.value,
-                context.localId,
-              )
-            : ''
-        }
-        aria-controls={listboxId}
-        aria-expanded={context.isListboxOpenSig.value}
-        aria-haspopup="listbox"
-        {...props}
-      >
-        <Slot />
-      </div>
-    </>
+    <div
+      role="combobox"
+      ref={rootRef}
+      data-open={context.isListboxOpenSig.value ? '' : undefined}
+      data-closed={!context.isListboxOpenSig.value ? '' : undefined}
+      aria-activedescendant={
+        context.isListboxOpenSig.value
+          ? getActiveDescendant(
+              context.highlightedIndexSig.value ?? -1,
+              context.optionsSig.value,
+              context.localId,
+            )
+          : ''
+      }
+      aria-controls={listboxId}
+      aria-expanded={context.isListboxOpenSig.value}
+      aria-haspopup="listbox"
+      {...props}
+    >
+      <Slot />
+    </div>
   );
 });