fix(autocomplete & website deploy fixes): autocomplete dropdown fix & deploy fix

thejackshelton · thejackshelton · commit 6a1710e65e9a · 2023-06-19T17:55:22.000-05:00
diff --git a/apps/website/src/_state/component-statuses.ts b/apps/website/src/_state/component-statuses.ts
@@ -40,6 +40,7 @@ export const componentsStatuses: ComponentKitsStatuses = {
   },
   headless: {
     Accordion: 'Planned',
+    Autocomplete: 'Draft',
     Carousel: 'Planned',
     Popover: 'Planned',
     Select: 'Draft',
diff --git a/apps/website/src/routes/docs/headless/(components)/autocomplete/examples.tsx b/apps/website/src/routes/docs/headless/(components)/autocomplete/examples.tsx
@@ -27,12 +27,12 @@ export const Example01 = component$(() => {
   return (
     <PreviewCodeExample>
       <div q:slot="actualComponent">
-        <AutocompleteRoot class="relative text-white">
-          <AutocompleteLabel class="text-inherit font-semibold">
+        <AutocompleteRoot class="relative">
+          <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">
-            <AutocompleteInput class="w-44 bg-inherit px-2 pr-6" />
+            <AutocompleteInput class="w-44 bg-inherit px-2 pr-6 text-white" />
             <AutocompleteButton class="w-6 h-6 group absolute right-0">
               <svg
                 xmlns="http://www.w3.org/2000/svg"
@@ -47,7 +47,7 @@ export const Example01 = component$(() => {
               </svg>
             </AutocompleteButton>
           </AutocompleteTrigger>
-          <AutocompleteListbox class="w-full bg-[#1f2532] px-4 py-2 mt-2 rounded-sm border-[#7d95b3] border-[1px]">
+          <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
                 optionValue={trainer}
diff --git a/apps/website/src/routes/docs/headless/(components)/select/examples.tsx b/apps/website/src/routes/docs/headless/(components)/select/examples.tsx
@@ -15,8 +15,8 @@ export const Example01 = component$(() => {
   return (
     <PreviewCodeExample>
       <div q:slot="actualComponent">
-        <SelectRoot class="dark:bg-gray-700">
-          <SelectLabel class="text-white font-semibold ml-2">
+        <SelectRoot>
+          <SelectLabel class=" font-semibold ml-2 text-[#333333] dark:text-white">
             Qwik Fruits
           </SelectLabel>
           <SelectTrigger class="flex justify-between items-center px-8 bg-[#1f2532] border-[#7d95b3] border-[1px] rounded-md p-4 group peer">
diff --git a/packages/kit-headless/src/components/Autocomplete/autocomplete.spec.tsx b/packages/kit-headless/src/components/Autocomplete/autocomplete.spec.tsx
@@ -8,7 +8,6 @@ import {
   AutocompleteListbox,
   AutocompleteOption,
 } from './autocomplete';
-import './autocompleteTest.css';
 
 const fruits = [
   'Apple',
diff --git a/packages/kit-headless/src/components/Autocomplete/autocomplete.stories.tsx b/packages/kit-headless/src/components/Autocomplete/autocomplete.stories.tsx
@@ -139,60 +139,6 @@ const RegularAutocomplete = () => (
         ))}
       </AutocompleteListbox>
     </AutocompleteRoot>
-    {/* <AutocompleteRoot style="width: fit-content">
-      <AutocompleteLabel>Label</AutocompleteLabel>
-      <AutocompleteTrigger>
-        <AutocompleteInput />
-        <AutocompleteButton>
-          <svg
-            xmlns="http://www.w3.org/2000/svg"
-            viewBox="0 0 24 24"
-            fill="none"
-            stroke="currentColor"
-            stroke-width="2"
-            stroke-linecap="round"
-            stroke-linejoin="round"
-            style="width: 20px; height: 20px;"
-          >
-            <polyline points="6 9 12 15 18 9"></polyline>
-          </svg>
-        </AutocompleteButton>
-      </AutocompleteTrigger>
-      <AutocompleteListbox class="listboxStyle">
-        {fruits.map((fruit, index) => (
-          <AutocompleteOption optionValue={fruit} key={index}>
-            {fruit}
-          </AutocompleteOption>
-        ))}
-      </AutocompleteListbox>
-    </AutocompleteRoot>
-    <AutocompleteRoot style="width: fit-content">
-      <AutocompleteLabel>Label</AutocompleteLabel>
-      <AutocompleteTrigger>
-        <AutocompleteInput />
-        <AutocompleteButton>
-          <svg
-            xmlns="http://www.w3.org/2000/svg"
-            viewBox="0 0 24 24"
-            fill="none"
-            stroke="currentColor"
-            stroke-width="2"
-            stroke-linecap="round"
-            stroke-linejoin="round"
-            style="width: 20px; height: 20px;"
-          >
-            <polyline points="6 9 12 15 18 9"></polyline>
-          </svg>
-        </AutocompleteButton>
-      </AutocompleteTrigger>
-      <AutocompleteListbox class="listboxStyle">
-        {fruits.map((fruit, index) => (
-          <AutocompleteOption optionValue={fruit} key={index}>
-            {fruit}
-          </AutocompleteOption>
-        ))}
-      </AutocompleteListbox>
-    </AutocompleteRoot> */}
   </>
 );
 
diff --git a/packages/kit-headless/src/components/Autocomplete/autocomplete.tsx b/packages/kit-headless/src/components/Autocomplete/autocomplete.tsx
@@ -13,8 +13,11 @@ import {
   useId,
   useOnWindow,
   useTask$,
+  QwikKeyboardEvent,
 } from '@builder.io/qwik';
 
+import { isBrowser, isServer } from '@builder.io/qwik/build';
+
 import { KeyCode } from '../../utils/key-code.type';
 
 // import { Popover, PopoverContent, PopoverTrigger } from '../popover';
@@ -226,14 +229,17 @@ export const AutocompleteRoot = component$(
 
     return (
       <div
-        onKeyDown$={(e) => {
-          if (e.key === 'Escape') {
-            contextService.isExpanded.value = false;
-            const inputElement = contextService.triggerRef.value
-              ?.firstElementChild as HTMLElement;
-            inputElement?.focus();
-          }
-        }}
+        onKeyDown$={[
+          $((e: QwikKeyboardEvent) => {
+            if (e.key === 'Escape') {
+              contextService.isExpanded.value = false;
+              const inputElement = contextService.triggerRef.value
+                ?.firstElementChild as HTMLElement;
+              inputElement?.focus();
+            }
+          }),
+          props.onKeyDown$,
+        ]}
         {...props}
       >
         <Slot />
@@ -279,7 +285,13 @@ export const AutocompleteInput = component$((props: InputProps) => {
   const ref = useSignal<HTMLElement>();
   const contextService = useContext(AutocompleteContextId);
 
-  useTask$(({ track }) => {
+  /* 
+    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 }) => {
     track(() => contextService.inputValue.value);
 
     contextService.filteredOptions = contextService.options.filter(
@@ -326,12 +338,15 @@ export const AutocompleteInput = component$((props: InputProps) => {
       aria-autocomplete="list"
       aria-controls={contextService.listBoxId}
       bind:value={contextService.inputValue}
-      onKeyDown$={(e) => {
-        if (e.key === 'ArrowDown') {
-          contextService.isExpanded.value = true;
-          contextService.filteredOptions[0]?.value?.focus();
-        }
-      }}
+      onKeyDown$={[
+        $((e: QwikKeyboardEvent) => {
+          if (e.key === 'ArrowDown') {
+            contextService.isExpanded.value = true;
+            contextService.filteredOptions[0]?.value?.focus();
+          }
+        }),
+        props.onKeyDown$,
+      ]}
       {...props}
     />
   );
@@ -382,38 +397,41 @@ export const AutocompleteListbox = component$((props: ListboxProps) => {
       role="listbox"
       {...props}
       // aria-label={!contextService.labelRef.value ? contextService.inputValue.value : undefined}
-      onKeyDown$={(e) => {
-        const availableOptions = contextService.filteredOptions.map(
-          (option) => option.value
-        );
+      onKeyDown$={[
+        $((e: QwikKeyboardEvent) => {
+          const availableOptions = contextService.filteredOptions.map(
+            (option) => option.value
+          );
+
+          const target = e.target as HTMLElement;
+          const currentIndex = availableOptions.indexOf(target);
+
+          if (e.key === 'ArrowDown') {
+            if (currentIndex === availableOptions.length - 1) {
+              availableOptions[0]?.focus();
+            } else {
+              availableOptions[currentIndex + 1]?.focus();
+            }
+          }
 
-        const target = e.target as HTMLElement;
-        const currentIndex = availableOptions.indexOf(target);
+          if (e.key === 'ArrowUp') {
+            if (currentIndex <= 0) {
+              availableOptions[availableOptions.length - 1]?.focus();
+            } else {
+              availableOptions[currentIndex - 1]?.focus();
+            }
+          }
 
-        if (e.key === 'ArrowDown') {
-          if (currentIndex === availableOptions.length - 1) {
+          if (e.key === 'Home') {
             availableOptions[0]?.focus();
-          } else {
-            availableOptions[currentIndex + 1]?.focus();
           }
-        }
 
-        if (e.key === 'ArrowUp') {
-          if (currentIndex <= 0) {
+          if (e.key === 'End') {
             availableOptions[availableOptions.length - 1]?.focus();
-          } else {
-            availableOptions[currentIndex - 1]?.focus();
           }
-        }
-
-        if (e.key === 'Home') {
-          availableOptions[0]?.focus();
-        }
-
-        if (e.key === 'End') {
-          availableOptions[availableOptions.length - 1]?.focus();
-        }
-      }}
+        }),
+        props.onKeyDown$,
+      ]}
     >
       <Slot />
     </ul>
@@ -425,25 +443,32 @@ export type OptionProps = { optionValue: string } & QwikIntrinsicElements['li'];
 export const AutocompleteOption = component$((props: OptionProps) => {
   const ref = useSignal<HTMLElement>();
   const contextService = useContext(AutocompleteContextId);
+
   contextService.options = [...contextService.options, ref];
 
   return (
     <li
       ref={ref}
       role="option"
-      onClick$={() => {
-        contextService.inputValue.value = props.optionValue;
-        contextService.isExpanded.value = false;
-      }}
-      onKeyDown$={(e) => {
-        if (e.key === 'Enter' || e.key === ' ') {
+      onClick$={[
+        $(() => {
           contextService.inputValue.value = props.optionValue;
           contextService.isExpanded.value = false;
-          const inputElement = contextService.triggerRef.value
-            ?.firstElementChild as HTMLElement;
-          inputElement?.focus();
-        }
-      }}
+        }),
+        props.onClick$,
+      ]}
+      onKeyDown$={[
+        $((e: QwikKeyboardEvent) => {
+          if (e.key === 'Enter' || e.key === ' ') {
+            contextService.inputValue.value = props.optionValue;
+            contextService.isExpanded.value = false;
+            const inputElement = contextService.triggerRef.value
+              ?.firstElementChild as HTMLElement;
+            inputElement?.focus();
+          }
+        }),
+        props.onKeyDown$,
+      ]}
       tabIndex={0}
       {...props}
     >
diff --git a/packages/kit-headless/src/components/tabs/tab.tsx b/packages/kit-headless/src/components/tabs/tab.tsx
@@ -8,17 +8,17 @@ import {
   useTask$,
   $,
   useSignal,
+  QwikIntrinsicElements,
 } from '@builder.io/qwik';
 import { tabsContextId } from './tabs-context-id';
 import { KeyCode } from '../../utils/key-code.type';
 import { isBrowser, isServer } from '@builder.io/qwik/build';
 
-export interface TabProps {
-  onClick?: PropFunction<() => void>;
+export type TabProps = {
   class?: string;
   selectedClassName?: string;
   disabled?: boolean;
-}
+} & QwikIntrinsicElements['button'];
 
 export const Tab = component$((props: TabProps) => {
   const contextService = useContext(tabsContextId);
@@ -100,12 +100,12 @@ export const Tab = component$((props: TabProps) => {
           ? `selected ${props.selectedClassName || ''}`
           : ''
       }${props.class ? ` ${props.class}` : ''}`}
-      onClick$={() => {
-        selectTab$();
-        if (props.onClick) {
-          props.onClick();
-        }
-      }}
+      onClick$={[
+        $(() => {
+          selectTab$();
+        }),
+        props.onClick$,
+      ]}
       onKeyDown$={(e) => {
         contextService.onTabKeyDown$(
           e.key as KeyCode,
diff --git a/packages/kit-tailwind/src/components/tabs/tab.tsx b/packages/kit-tailwind/src/components/tabs/tab.tsx
@@ -1,18 +1,23 @@
-import { component$, PropFunction, Slot } from '@builder.io/qwik';
+import {
+  component$,
+  PropFunction,
+  Slot,
+  QwikIntrinsicElements,
+} from '@builder.io/qwik';
 import { Tab as HeadlessTab } from '@qwik-ui/headless';
 
-interface TabProps {
+export type TabProps = {
   class?: string;
   isLifted?: boolean;
   isBordered?: boolean;
   onClick$?: PropFunction<(clicked: number) => void>;
-}
+} & QwikIntrinsicElements['button'];
 
 export const Tab = component$(
   ({ isBordered, isLifted, onClick$, ...props }: TabProps) => {
     return (
       <HeadlessTab
-        onClick={onClick$}
+        onClick$={() => onClick$}
         class={`tab ${isBordered ? 'tab-bordered' : ''} ${
           isLifted ? 'tab-lifted' : ''
         }`}
