fix(popover): get popover to work with everything in combobox

Author: thejackshelton

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

@@ -15,7 +15,6 @@ import {
   getNextEnabledOptionIndex,
   getPrevEnabledOptionIndex,
 } from './utils';
-import { usePopover } from '../popover';
 
 export type ComboboxInputProps = {
   disableOnBlur?: boolean;
@@ -27,8 +26,6 @@ export const ComboboxInput = component$(
     ...props
   }: ComboboxInputProps) => {
     const context = useContext(ComboboxContextId as ContextId<ComboboxContext<O>>);
-    const triggerId = `${context.localId}-trigger`;
-    const { initPopover$ } = usePopover(triggerId);
 
     const inputId = props.id || `${context.localId}-input`;
     const listboxId = `${context.localId}-listbox`;
@@ -152,7 +149,7 @@ export const ComboboxInput = component$(
         }
         aria-controls={listboxId}
         value={context.inputValueSig.value}
-        onInput$={[onInputBehavior$, props.onInput$, initPopover$]}
+        onInput$={[onInputBehavior$, props.onInput$]}
         onBlur$={[
           $(() => {
             disableOnBlur ? null : (context.isListboxOpenSig.value = false);

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

@@ -1,5 +1,5 @@
 import { component$, useContext, Slot, useTask$ } from '@builder.io/qwik';
-import { Popover } from '../popover';
+import { Popover, usePopover } from '../popover';
 
 import ComboboxContextId from './combobox-context-id';
 import { FloatingProps } from '../popover/floating';
@@ -9,6 +9,7 @@ export const ComboboxPopover = component$(
   (props: Partial<FloatingProps & PopoverImplProps>) => {
     const context = useContext(ComboboxContextId);
     const popoverId = `${context.localId}-popover`;
+    const { initPopover$ } = usePopover(popoverId);
 
     /* REMEMBER, whenever an option is selected or onMouseDown$ the listbox is closed, and the popover should sync to that */
     useTask$(async ({ track }) => {
@@ -18,6 +19,7 @@ export const ComboboxPopover = component$(
       console.log('LISTBOX OPEN: ', context.isListboxOpenSig.value);
 
       if (context.isListboxOpenSig.value) {
+        await initPopover$();
         context.popoverRef.value?.showPopover();
       } else {
         context.popoverRef.value?.hidePopover();