fix(popover): working but hacky

Author: thejackshelton

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

@@ -1,4 +1,4 @@
-import { component$, useContext, Slot, useTask$ } from '@builder.io/qwik';
+import { component$, useContext, Slot, useTask$, useId } from '@builder.io/qwik';
 import { Popover, usePopover } from '../popover';
 
 import ComboboxContextId from './combobox-context-id';
@@ -8,15 +8,16 @@ import { PopoverImplProps } from '../popover/popover-impl';
 export const ComboboxPopover = component$(
   (props: Partial<FloatingProps & PopoverImplProps>) => {
     const context = useContext(ComboboxContextId);
-    const popoverId = `${context.localId}-popover`;
-    const { initPopover$ } = usePopover(popoverId);
+    const customPopoverId = useId();
+    console.log('customPopoverId:', customPopoverId);
+    const { initPopover$ } = usePopover(customPopoverId);
 
     /* REMEMBER, whenever an option is selected or onMouseDown$ the listbox is closed, and the popover should sync to that */
     useTask$(async ({ track }) => {
       track(() => context.isListboxOpenSig.value);
       track(() => context.popoverRef.value);
 
-      console.log('LISTBOX OPEN: ', context.isListboxOpenSig.value);
+      console.log('POPOVER REF:', context.popoverRef.value);
 
       if (context.isListboxOpenSig.value) {
         await initPopover$();
@@ -29,7 +30,7 @@ export const ComboboxPopover = component$(
     return (
       <Popover
         {...props}
-        id={popoverId}
+        id={customPopoverId}
         floating={true}
         anchorRef={context.inputRef}
         popoverRef={context.popoverRef}

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

@@ -86,6 +86,8 @@ export const FloatingPopover = component$(
       const popover = track(() => popoverRef.value);
       if (!popover || !anchor) return;
 
+      console.log('INSIDE FLOATING: ', popoverRef.value);
+
       const updatePosition = async () => {
         const middleware = [
           _offset(gutter),

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

@@ -4,10 +4,10 @@ import {
   useSignal,
   useStyles$,
   useContext,
+  useTask$,
   type Signal,
   type ClassList,
   createContextId,
-  useTask$,
 } from '@builder.io/qwik';
 
 import { isServer } from '@builder.io/qwik/build';
@@ -53,17 +53,24 @@ export const PopoverImpl = component$<PopoverImplProps>((props) => {
   /** have we rendered on the client yet? 0: no, 1: force, 2: yes */
   const hasRenderedOnClientSig = useSignal(isServer ? 0 : 2);
   const teleportSig = useSignal(false);
+  const isToggledSig = useSignal(false);
 
   // This forces a re-render on each popover instance when the signal changes
   if (hasRenderedOnClientSig.value === 1) {
-    console.log('I RERENDER!');
     // Now run the task again after we force-rendered the contex
     setTimeout(() => (teleportSig.value = true), 0);
   }
 
+  useTask$(({ track }) => {
+    track(() => isToggledSig.value);
+
+    if (props.popoverRef) {
+      props.popoverRef.value = popoverRef.value;
+    }
+  });
+
   useTask$(async ({ track, cleanup }) => {
     track(() => teleportSig.value);
-    console.log('inside task');
 
     if (isServer) return;
 
@@ -78,11 +85,6 @@ export const PopoverImpl = component$<PopoverImplProps>((props) => {
     }
 
     if (popoverRef.value) {
-      // user passed in popover ref (context, state, etc.)
-      if (props.popoverRef) {
-        props.popoverRef.value = popoverRef.value;
-      }
-
       polyfillContainer.appendChild(popoverRef.value);
 
       document.dispatchEvent(new CustomEvent('showpopover'));
@@ -102,6 +104,7 @@ export const PopoverImpl = component$<PopoverImplProps>((props) => {
       popover={props.manual || props.popover === 'manual' ? 'manual' : 'auto'}
       ref={popoverRef}
       onToggle$={(e) => {
+        isToggledSig.value = true;
         if (!popoverRef.value) return;
 
         const popover = popoverRef.value;

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

@@ -1,5 +1,6 @@
-import { QwikIntrinsicElements, useOnDocument } from '@builder.io/qwik';
+import { QwikIntrinsicElements, useOnDocument, useTask$ } from '@builder.io/qwik';
 import { Slot, component$, useSignal, $ } from '@builder.io/qwik';
+import { isBrowser } from '@builder.io/qwik/build';
 
 type PopoverTriggerProps = {
   popovertarget: string;
@@ -10,6 +11,7 @@ type PopoverTriggerProps = {
 export function usePopover(popovertarget: string) {
   const hasPolyfillLoadedSig = useSignal<boolean>(false);
   const didInteractSig = useSignal<boolean>(false);
+  const isSupportedSig = useSignal<boolean>(false);
 
   const loadPolyfill$ = $(async () => {
     await import('@oddbird/popover-polyfill');
@@ -23,13 +25,33 @@ export function usePopover(popovertarget: string) {
       typeof HTMLElement.prototype === 'object' &&
       'popover' in HTMLElement.prototype;
 
+    isSupportedSig.value = isSupported;
+    console.log('INSIDE HERE: ', isSupportedSig.value);
+
     if (!hasPolyfillLoadedSig.value && !isSupported) {
       await loadPolyfill$();
       hasPolyfillLoadedSig.value = true;
     }
     didInteractSig.value = true;
   });
 
+  useTask$(({ track }) => {
+    track(() => didInteractSig.value);
+
+    if (isBrowser && isSupportedSig.value) {
+      const popover = document.getElementById(popovertarget);
+
+      if (!popover) return;
+
+      console.log('inside interact task: ', popover);
+      console.log('popover id: ', popovertarget);
+
+      if (popover && popover.hasAttribute('popover')) {
+        popover.showPopover();
+      }
+    }
+  });
+
   // event is created after teleported properly
   useOnDocument(
     'showpopover',
@@ -46,24 +68,29 @@ export function usePopover(popovertarget: string) {
       if (!popover.classList.contains(':popover-open')) {
         // @ts-ignore
         popover.showPopover();
-        console.log('inside the showpopover doc');
       }
     }),
   );
 
-  return { initPopover$ };
+  return { initPopover$, isSupportedSig };
 }
 
 export const PopoverTrigger = component$<PopoverTriggerProps>(
   ({ popovertarget, ...rest }: PopoverTriggerProps) => {
-    const { initPopover$ } = usePopover(popovertarget);
+    const { initPopover$, isSupportedSig } = usePopover(popovertarget);
 
     return (
       <button
         {...rest}
         // @ts-expect-error bad types
         popovertarget={popovertarget}
-        onClick$={[rest.onClick$, $(() => initPopover$())]}
+        onClick$={[
+          rest.onClick$,
+          $(() => {
+            console.log('isSupported: ', isSupportedSig.value);
+            initPopover$();
+          }),
+        ]}
       >
         <Slot />
       </button>