Merge pull request #380 from thejackshelton/autocomplete-improvements

refactor(accordion & autocomplete): autocomplete preventdefault, acco…

Author: thejackshelton

apps/website/src/routes/docs/headless/(components)/autocomplete/examples.tsx

@@ -1,13 +1,14 @@
 import { component$, Slot } from '@builder.io/qwik';
 import {
-  AutocompleteButton,
-  AutocompleteInput,
   AutocompleteLabel,
-  AutocompleteListbox,
-  AutocompleteOption,
   AutocompleteRoot,
-  AutocompleteTrigger
+  AutocompleteControl,
+  AutocompleteInput,
+  AutocompleteTrigger,
+  AutocompleteListbox,
+  AutocompleteOption
 } from '@qwik-ui/headless';
+
 import { PreviewCodeExample } from '../../../_components/preview-code-example/preview-code-example';
 
 const trainers = [
@@ -31,9 +32,9 @@ export const Example01 = component$(() => {
           <AutocompleteLabel class=" font-semibold dark:text-white text-[#333333]">
             Personal Trainers ⚡
           </AutocompleteLabel>
-          <AutocompleteTrigger class="bg-[#1f2532] flex items-center rounded-sm border-[#7d95b3] border-[1px] relative">
+          <AutocompleteControl class="bg-[#1f2532] flex items-center rounded-sm border-[#7d95b3] border-[1px] relative">
             <AutocompleteInput class="w-44 bg-inherit px-2 pr-6 text-white" />
-            <AutocompleteButton class="w-6 h-6 group absolute right-0">
+            <AutocompleteTrigger class="w-6 h-6 group absolute right-0">
               <svg
                 xmlns="http://www.w3.org/2000/svg"
                 viewBox="0 0 24 24"
@@ -45,8 +46,8 @@ export const Example01 = component$(() => {
               >
                 <polyline points="6 9 12 15 18 9"></polyline>
               </svg>
-            </AutocompleteButton>
-          </AutocompleteTrigger>
+            </AutocompleteTrigger>
+          </AutocompleteControl>
           <AutocompleteListbox class="text-white w-full bg-[#1f2532] px-4 py-2 mt-2 rounded-sm border-[#7d95b3] border-[1px]">
             {trainers.map((trainer, index) => (
               <AutocompleteOption

apps/website/src/routes/docs/headless/(components)/autocomplete/index.mdx

@@ -7,7 +7,6 @@ import {
   AutocompleteLabel,
   AutocompleteTrigger,
   AutocompleteInput,
-  AutocompleteButton,
   AutocompleteListbox,
   AutocompleteOption,
 } from '@qwik-ui/headless';
@@ -32,9 +31,9 @@ import { AlphaBanner } from '../../../_components/alpha-banner/alpha-banner';
     <AutocompleteLabel class="text-inherit font-semibold">
       Personal Trainers ⚡
     </AutocompleteLabel>
-    <AutocompleteTrigger class="bg-[#1f2532] flex items-center rounded-sm border-[#7d95b3] border-[1px] relative">
+    <AutocompleteControl class="bg-[#1f2532] flex items-center rounded-sm border-[#7d95b3] border-[1px] relative">
       <AutocompleteInput class="w-44 bg-inherit px-2 pr-6" />
-      <AutocompleteButton class="w-6 h-6 group absolute right-0">
+      <AutocompleteTrigger class="w-6 h-6 group absolute right-0">
         <svg
           xmlns="http://www.w3.org/2000/svg"
           viewBox="0 0 24 24"
@@ -46,8 +45,8 @@ import { AlphaBanner } from '../../../_components/alpha-banner/alpha-banner';
         >
           <polyline points="6 9 12 15 18 9"></polyline>
         </svg>
-      </AutocompleteButton>
-    </AutocompleteTrigger>
+      </AutocompleteTrigger>
+    </AutocompleteControl>
     <AutocompleteListbox class="w-full bg-[#1f2532] px-4 py-2 mt-2 rounded-sm border-[#7d95b3] border-[1px]">
       {trainers.map((trainer, index) => (
         <AutocompleteOption
@@ -68,22 +67,24 @@ import { AlphaBanner } from '../../../_components/alpha-banner/alpha-banner';
   <CodeExample>
     ```tsx
     import { component$ } from '@builder.io/qwik';
-    import { AutocompleteRoot, AutocompleteLabel, AutocompleteTrigger, AutocompleteInput, AutocompleteButton, AutocompleteListbox, AutocompleteOption } from '@qwik-ui/headless';
-
-    export default component$(() => (
-      <AutocompleteRoot>
-        <AutocompleteLabel>Label</AutocompleteLabel>
-        <AutocompleteTrigger>
-          <AutocompleteInput />
-          <AutocompleteButton>
-            Button Marker
-          </AutocompleteButton>
-        </AutocompleteTrigger>
-        <AutocompleteListbox>
-          <AutocompleteOption />
-        </AutocompleteListbox>
-      </AutocompleteRoot>
-    ))
+    import { AutocompleteRoot, AutocompleteLabel, AutocompleteControl, AutocompleteInput, AutocompleteTrigger, AutocompleteListbox, AutocompleteOption } from '@qwik-ui/headless';
+
+    export default component$(() => {
+      return (
+        <AutocompleteRoot>
+          <AutocompleteLabel>Label</AutocompleteLabel>
+          <AutocompleteControl>
+            <AutocompleteInput />
+            <AutocompleteTrigger>
+              Button
+            </AutocompleteTrigger>
+          </AutocompleteControl>
+          <AutocompleteListbox>
+            <AutocompleteOption>Option</AutocompleteOption>
+          </AutocompleteListbox>
+        </AutocompleteRoot>
+      )
+    })
     ```
 
   </CodeExample>

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

@@ -14,7 +14,7 @@ import { accordionItemContextId, accordionRootContextId } from './accordion-cont
 
 import { KeyCode } from '../../utils/key-code.type';
 
-export const accordionPreventedKeys = [
+const accordionPreventedKeys = [
   KeyCode.Home,
   KeyCode.End,
   KeyCode.PageDown,
@@ -23,7 +23,9 @@ export const accordionPreventedKeys = [
   KeyCode.ArrowUp
 ];
 
-export type AccordionTriggerProps = QwikIntrinsicElements['button'];
+export type AccordionTriggerProps = {
+  disabled?: boolean;
+} & QwikIntrinsicElements['button'];
 
 export const AccordionTrigger = component$(
   ({ disabled, ...props }: AccordionTriggerProps) => {

packages/kit-headless/src/components/autocomplete/autocomplete-button.tsx

@@ -10,7 +10,7 @@ export interface AutocompleteContext {
   labelRef: Signal<HTMLElement | undefined>;
   listBoxId: string;
   inputId: string;
-  buttonId: string;
+  triggerId: string;
   activeOptionId: Signal<string | null>;
   inputValue: Signal<string>;
   focusInput$: QRL<(inputId: string) => void>;

packages/kit-headless/src/components/autocomplete/autocomplete-context.type.ts

@@ -0,0 +1,22 @@
+import {
+  component$,
+  useSignal,
+  useContext,
+  Slot,
+  type QwikIntrinsicElements
+} from '@builder.io/qwik';
+import AutocompleteContextId from './autocomplete-context-id';
+
+export type AutocompleteControlProps = QwikIntrinsicElements['div'];
+
+export const AutocompleteControl = component$((props: AutocompleteControlProps) => {
+  const ref = useSignal<HTMLElement>();
+  const contextService = useContext(AutocompleteContextId);
+  contextService.triggerRef = ref;
+
+  return (
+    <div ref={ref} {...props}>
+      <Slot />
+    </div>
+  );
+});

packages/kit-headless/src/components/autocomplete/autocomplete-control.tsx

@@ -6,10 +6,21 @@ import {
   $,
   type Signal,
   type QwikKeyboardEvent,
-  type QwikIntrinsicElements,
+  type QwikIntrinsicElements
 } from '@builder.io/qwik';
 import AutocompleteContextId from './autocomplete-context-id';
 
+import { KeyCode } from '../../utils/key-code.type';
+
+const autocompletePreventedKeys = [
+  KeyCode.Home,
+  KeyCode.End,
+  KeyCode.PageDown,
+  KeyCode.PageUp,
+  KeyCode.ArrowDown,
+  KeyCode.ArrowUp
+];
+
 export type InputProps = QwikIntrinsicElements['input'];
 
 // Add required context here
@@ -18,37 +29,53 @@ export const AutocompleteInput = component$((props: InputProps) => {
   const contextService = useContext(AutocompleteContextId);
   const listboxId = contextService.listBoxId;
   const labelRef = contextService.labelRef;
+  const inputElement = ref.value;
+
+  useVisibleTask$(function preventDefaultTask({ cleanup }) {
+    function keyHandler(e: KeyboardEvent) {
+      if (autocompletePreventedKeys.includes(e.key as KeyCode)) {
+        e.preventDefault();
+      }
+    }
+
+    inputElement?.addEventListener('keydown', keyHandler);
+    cleanup(() => {
+      inputElement?.removeEventListener('keydown', keyHandler);
+    });
+  });
 
   /* 
     previously had useTask here, but noticed whenever it first renders, 
     it won't focus the first option when hitting the down arrow key to open the listbox
     Also, all of our tests break on useTask, BUT it seems to work fine in the browser with useTask.
     Very odd.
   */
-  useVisibleTask$(({ track }) => {
+  useVisibleTask$(async ({ track }) => {
     track(() => contextService.inputValue.value);
 
-    contextService.filteredOptions = contextService.options.filter(
-      (option: Signal) => {
-        const optionValue = option.value.getAttribute('optionValue');
-        const inputValue = contextService.inputValue.value;
+    contextService.filteredOptions = contextService.options.filter((option: Signal) => {
+      const optionValue = option.value.getAttribute('optionValue');
+      const inputValue = contextService.inputValue.value;
 
-        if (
-          contextService.inputValue.value.length >= 0 &&
-          document.activeElement === ref.value
-        ) {
-          if (optionValue === inputValue) {
-            contextService.isExpanded.value = false;
-          } else if (optionValue.match(new RegExp(inputValue, 'i'))) {
-            contextService.isExpanded.value = true;
-          }
-        } else {
+      const defaultFilterRegex = '[0-9]*';
+      const defaultFilterPattern = inputValue + defaultFilterRegex;
+      const defaultFilter = new RegExp(defaultFilterPattern, 'i');
+
+      if (
+        contextService.inputValue.value.length >= 0 &&
+        document.activeElement === ref.value
+      ) {
+        if (optionValue === inputValue) {
           contextService.isExpanded.value = false;
+        } else if (optionValue.match(defaultFilter)) {
+          contextService.isExpanded.value = true;
         }
-
-        return optionValue.match(new RegExp(inputValue, 'i'));
+      } else {
+        contextService.isExpanded.value = false;
       }
-    );
+
+      return optionValue.match(defaultFilter);
+    });
 
     // Probably better to refactor Signal type later
     contextService.options.map((option: Signal) => {
@@ -86,7 +113,7 @@ export const AutocompleteInput = component$((props: InputProps) => {
             contextService.filteredOptions[0]?.value?.focus();
           }
         }),
-        props.onKeyDown$,
+        props.onKeyDown$
       ]}
       {...props}
     />

packages/kit-headless/src/components/autocomplete/autocomplete-input.tsx

@@ -6,9 +6,21 @@ import {
   Slot,
   type QwikIntrinsicElements,
   type QwikKeyboardEvent,
+  useVisibleTask$
 } from '@builder.io/qwik';
 import AutocompleteContextId from './autocomplete-context-id';
 
+import { KeyCode } from '../../utils/key-code.type';
+
+const preventedKeys = [
+  KeyCode.Home,
+  KeyCode.End,
+  KeyCode.PageDown,
+  KeyCode.PageUp,
+  KeyCode.ArrowDown,
+  KeyCode.ArrowUp
+];
+
 export type ListboxProps = {
   isExpanded?: boolean;
 } & QwikIntrinsicElements['ul'];
@@ -17,7 +29,20 @@ export const AutocompleteListbox = component$((props: ListboxProps) => {
   const ref = useSignal<HTMLElement>();
   const contextService = useContext(AutocompleteContextId);
   const listboxId = contextService.listBoxId;
-  contextService.listBoxRef = ref;
+  const listboxElement = ref.value;
+
+  useVisibleTask$(function preventDefaultTask({ cleanup }) {
+    function keyHandler(e: KeyboardEvent) {
+      if (preventedKeys.includes(e.key as KeyCode)) {
+        e.preventDefault();
+      }
+    }
+
+    listboxElement?.addEventListener('keydown', keyHandler);
+    cleanup(() => {
+      listboxElement?.removeEventListener('keydown', keyHandler);
+    });
+  });
 
   return (
     <ul
@@ -64,7 +89,7 @@ export const AutocompleteListbox = component$((props: ListboxProps) => {
             availableOptions[availableOptions.length - 1]?.focus();
           }
         }),
-        props.onKeyDown$,
+        props.onKeyDown$
       ]}
     >
       <Slot />

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

@@ -4,8 +4,9 @@ import {
   useContext,
   component$,
   $,
+  useVisibleTask$,
   type QwikIntrinsicElements,
-  type QwikKeyboardEvent,
+  type QwikKeyboardEvent
 } from '@builder.io/qwik';
 import AutocompleteContextId from './autocomplete-context-id';
 
@@ -17,6 +18,7 @@ export type OptionProps = {
 export const AutocompleteOption = component$((props: OptionProps) => {
   const ref = useSignal<HTMLElement>();
   const contextService = useContext(AutocompleteContextId);
+  const optionElement = ref.value;
 
   contextService.options = [...contextService.options, ref];
 
@@ -33,7 +35,7 @@ export const AutocompleteOption = component$((props: OptionProps) => {
             contextService.isExpanded.value = false;
           }
         }),
-        props.onClick$,
+        props.onClick$
       ]}
       onKeyDown$={[
         $((e: QwikKeyboardEvent) => {
@@ -43,7 +45,7 @@ export const AutocompleteOption = component$((props: OptionProps) => {
             contextService.focusInput$(contextService.inputId);
           }
         }),
-        props.onKeyDown$,
+        props.onKeyDown$
       ]}
       {...props}
     >