Merge pull request #416 from thejackshelton/feat-combobox

fix(combobox): removing extra ref api

Author: thejackshelton

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

@@ -1173,7 +1173,6 @@ export const ContextChild = component$(() => {
 export const SearchBar = component$(() => {
   const inputValueSig = useSignal('');
   const highlightedIndexSig = useSignal(0);
-  const inputRef = useSignal<HTMLInputElement>();
   const isListboxOpenSig = useSignal(false);
 
   type MyComponents = {
@@ -1199,7 +1198,6 @@ export const SearchBar = component$(() => {
         <div>
           <Combobox
             bind:inputValueSig={inputValueSig}
-            bind:inputRef={inputRef}
             bind:highlightedIndexSig={highlightedIndexSig}
             bind:isListboxOpenSig={isListboxOpenSig}
             optionValueKey="component"
@@ -1228,7 +1226,6 @@ export const SearchBar = component$(() => {
                   aria-label="clear search"
                   onMouseDown$={() => {
                     inputValueSig.value = '';
-                    inputRef.value?.focus();
                   }}
                   class="w-6 h-6 flex justify-center items-center absolute top-0 right-0"
                 >

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

@@ -1103,11 +1103,6 @@ This involves creating a signal and passing it in using the [bind syntax](https:
       type: 'Signal',
       description: 'Controls the current value of the input.',
     },
-    {
-      name: 'bind:inputRef',
-      type: 'Signal',
-      description: 'Controls the reference of the input.',
-    },
   ]}
 />
 

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

@@ -48,7 +48,6 @@ export type ComboboxProps<O extends Option = Option> = {
   'bind:isInputFocusedSig'?: Signal<boolean | undefined>;
   'bind:inputValueSig'?: Signal<string>;
   'bind:highlightedIndexSig'?: Signal<number>;
-  'bind:inputRef'?: Signal<HTMLInputElement | undefined>;
 } & QwikIntrinsicElements['div'];
 
 export const Combobox = component$(
@@ -58,7 +57,6 @@ export const Combobox = component$(
       'bind:isInputFocusedSig': givenInputFocusedSig,
       'bind:inputValueSig': givenInputValueSig,
       'bind:highlightedIndexSig': givenHighlightedIndexSig,
-      'bind:inputRef': givenInputRef,
       options,
       defaultLabel = '',
       optionValueKey = 'value',
@@ -127,8 +125,7 @@ export const Combobox = component$(
 
     const labelRef = useSignal<HTMLLabelElement>();
     const listboxRef = useSignal<HTMLUListElement>();
-    const defaultInputRef = useSignal<HTMLInputElement>();
-    const inputRef = givenInputRef || defaultInputRef;
+    const inputRef = useSignal<HTMLInputElement>();
 
     const triggerRef = useSignal<HTMLButtonElement>();