avoid use of useClientEffect in Headless Select (#165)

Author: KenAKAFrosty

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

@@ -4,25 +4,25 @@ import {
   useContext,
   useContextProvider,
   Slot,
-  useClientEffect$,
   useSignal,
   Signal,
   $,
-  QRL,
   useOnWindow,
   useStore,
+  useTask$,
 } from '@builder.io/qwik';
 import { computePosition, flip } from '@floating-ui/dom';
 
 interface SelectRootContextService {
-  options: HTMLElement[];
+  options: Signal<HTMLElement | undefined>[];
   selectedOption: Signal<string>;
   isExpanded: Signal<boolean>;
-  setTriggerRef$: QRL<(ref: Signal<HTMLElement | undefined>) => void>;
-  setListBoxRef$: QRL<(ref: Signal<HTMLElement | undefined>) => void>;
+  triggerRef: Signal<HTMLElement | undefined>;
+  listBoxRef: Signal<HTMLElement | undefined>;
 }
 
-export const selectContext = createContext<SelectRootContextService>('select-root');
+export const selectContext =
+  createContext<SelectRootContextService>('select-root');
 
 interface StyleProps {
   class?: string;
@@ -35,30 +35,17 @@ interface RootProps extends StyleProps {
 
 const Root = component$(({ defaultValue, ...props }: RootProps) => {
   const options = useStore([]);
-
   const selectedOption = useSignal(defaultValue ? defaultValue : '');
   const isExpanded = useSignal(false);
-
   const triggerRef = useSignal<HTMLElement>();
-  const setTriggerRef$ = $((ref: Signal<HTMLElement | undefined>) => {
-    if (ref) {
-      triggerRef.value = ref.value;
-    }
-  });
-
   const listBoxRef = useSignal<HTMLElement>();
-  const setListBoxRef$ = $((ref: Signal<HTMLElement | undefined>) => {
-    if (ref) {
-      listBoxRef.value = ref.value;
-    }
-  });
 
   const contextService: SelectRootContextService = {
     options,
     selectedOption,
     isExpanded,
-    setTriggerRef$,
-    setListBoxRef$,
+    triggerRef,
+    listBoxRef,
   };
 
   useContextProvider(selectContext, contextService);
@@ -77,9 +64,9 @@ const Root = component$(({ defaultValue, ...props }: RootProps) => {
     }
   );
 
-  useClientEffect$(async ({ track }) => {
-    const trigger = track(() => triggerRef.value);
-    const listBox = track(() => listBoxRef.value);
+  useTask$(async ({ track }) => {
+    const trigger = track(() => contextService.triggerRef.value);
+    const listBox = track(() => contextService.listBoxRef.value);
     const expanded = track(() => isExpanded.value);
 
     if (expanded && trigger && listBox) {
@@ -101,7 +88,7 @@ const Root = component$(({ defaultValue, ...props }: RootProps) => {
       const target = e.target as HTMLElement;
       if (
         contextService.isExpanded.value === true &&
-        e.target !== triggerRef.value &&
+        e.target !== contextService.triggerRef.value &&
         target.getAttribute('role') !== 'option' &&
         target.nodeName !== 'LABEL'
       ) {
@@ -131,10 +118,7 @@ interface TriggerProps extends StyleProps {
 const Trigger = component$(({ disabled, ...props }: TriggerProps) => {
   const ref = useSignal<HTMLElement>();
   const contextService = useContext(selectContext);
-
-  useClientEffect$(() => {
-    contextService.setTriggerRef$(ref);
-  });
+  contextService.triggerRef = ref;
 
   return (
     <button
@@ -177,15 +161,7 @@ const Marker = component$(({ ...props }: StyleProps) => {
 const ListBox = component$(({ ...props }: StyleProps) => {
   const ref = useSignal<HTMLElement>();
   const contextService = useContext(selectContext);
-
-  useClientEffect$(() => {
-    contextService.setListBoxRef$(ref);
-    const options = ref.value?.querySelectorAll<HTMLElement>('[role="option"]');
-    if (options?.length) {
-      options.forEach((option) => contextService.options.push(option));
-    }
-  });
-
+  contextService.listBoxRef = ref;
   return (
     <ul
       ref={ref}
@@ -199,25 +175,27 @@ const ListBox = component$(({ ...props }: StyleProps) => {
     `}
       class={props.class}
       onKeyDown$={(e) => {
-        const availableOptions = contextService.options.filter(
-          (option) => !(option.getAttribute('aria-disabled') === 'true')
-        );
+        const availableOptions = contextService.options
+          .map((option) => option.value)
+          .filter(
+            (option) => !(option?.getAttribute('aria-disabled') === 'true')
+          );
         const target = e.target as HTMLElement;
         const currentIndex = availableOptions.indexOf(target);
 
         if (e.key === 'ArrowDown') {
           if (currentIndex === availableOptions.length - 1) {
-            availableOptions[0].focus();
+            availableOptions[0]?.focus();
           } else {
-            availableOptions[currentIndex + 1].focus();
+            availableOptions[currentIndex + 1]?.focus();
           }
         }
 
         if (e.key === 'ArrowUp') {
           if (currentIndex <= 0) {
-            availableOptions[availableOptions.length - 1].focus();
+            availableOptions[availableOptions.length - 1]?.focus();
           } else {
-            availableOptions[currentIndex - 1].focus();
+            availableOptions[currentIndex - 1]?.focus();
           }
         }
       }}
@@ -254,9 +232,11 @@ interface OptionProps extends StyleProps {
 
 const Option = component$(({ disabled, value, ...props }: OptionProps) => {
   const contextService = useContext(selectContext);
-
+  const thisOptionSignal = useSignal<HTMLElement>();
+  contextService.options = [...contextService.options, thisOptionSignal];
   return (
     <li
+      ref={thisOptionSignal}
       role="option"
       tabIndex={disabled ? -1 : 0}
       aria-disabled={disabled}
@@ -298,13 +278,4 @@ const Option = component$(({ disabled, value, ...props }: OptionProps) => {
   );
 });
 
-export {
-  Root,
-  Trigger,
-  Value,
-  Marker,
-  ListBox,
-  Group,
-  Label,
-  Option,
-};
+export { Root, Trigger, Value, Marker, ListBox, Group, Label, Option };