fix(popoveer): refactored implementation detail initPopover$

Author: thejackshelton

apps/website/src/routes/docs/headless/popover/examples/anchor-ref.tsx

@@ -4,7 +4,7 @@ import { usePopover } from '@qwik-ui/headless';
 
 export default component$(() => {
   const buttonRef = useSignal<HTMLButtonElement>();
-  const { initPopover$ } = usePopover(`anchor-ref-id`);
+  const { showPopover, hidePopover } = usePopover(`anchor-ref-id`);
   const myPopoverRef = useSignal<HTMLElement>();
 
   return (
@@ -15,11 +15,11 @@ export default component$(() => {
           ref={buttonRef}
           disableClickInitPopover
           onPointerEnter$={() => {
-            initPopover$();
-            myPopoverRef.value?.showPopover();
+            showPopover();
+            console.log('in pointer!');
           }}
           onPointerLeave$={() => {
-            myPopoverRef.value?.hidePopover();
+            hidePopover();
           }}
           popoverTargetAction="show"
           popovertarget="anchor-ref-id"

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

@@ -4,25 +4,25 @@ import { Popover, usePopover } from '../popover';
 import ComboboxContextId from './combobox-context-id';
 import { FloatingProps } from '../popover/floating';
 import { PopoverImplProps } from '../popover/popover-impl';
+import { isServer } from '@builder.io/qwik/build';
 
 export const ComboboxPopover = component$(
   (props: Partial<FloatingProps & PopoverImplProps>) => {
     const context = useContext(ComboboxContextId);
     const customPopoverId = useId();
     console.log('customPopoverId:', customPopoverId);
-    const { initPopover$ } = usePopover(customPopoverId);
+    const { showPopover, hidePopover } = 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);
 
-      console.log('LISTBOX OPEN?: ', context.isListboxOpenSig.value);
+      if (isServer) return;
 
       if (context.isListboxOpenSig.value) {
-        await initPopover$();
-        context.popoverRef.value?.showPopover();
+        showPopover();
       } else {
-        context.popoverRef.value?.hidePopover();
+        hidePopover();
       }
     });
 

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

@@ -1,5 +1,12 @@
-import { QwikIntrinsicElements, useOnDocument, useTask$ } from '@builder.io/qwik';
-import { Slot, component$, useSignal, $ } from '@builder.io/qwik';
+import {
+  QwikIntrinsicElements,
+  useOnDocument,
+  useTask$,
+  Slot,
+  component$,
+  useSignal,
+  $,
+} from '@builder.io/qwik';
 import { isBrowser } from '@builder.io/qwik/build';
 
 type PopoverTriggerProps = {
@@ -47,13 +54,11 @@ export function usePopover(popovertarget: string) {
 
     // so it only runs once on click for supported browsers
     if (isSupportedSig.value) {
-      const popover = popoverSig.value;
+      if (!popoverSig.value) return;
 
-      if (!popover) return;
-
-      if (popover && popover.hasAttribute('popover')) {
+      if (popoverSig.value && popoverSig.value.hasAttribute('popover')) {
         /* opens manual on any event */
-        popover.showPopover();
+        popoverSig.value.showPopover();
       }
     }
   });
@@ -64,20 +69,39 @@ export function usePopover(popovertarget: string) {
     $(() => {
       if (!didInteractSig.value) return;
 
-      const popover = popoverSig.value;
-
-      if (!popover) return;
+      if (!popoverSig.value) return;
 
       // calls code in here twice for some reason, we think it's because of the client re-render, but it still works
 
       // so it only runs once on first click
-      if (!popover.classList.contains(':popover-open')) {
-        popover.showPopover();
+      if (!popoverSig.value.classList.contains(':popover-open')) {
+        popoverSig.value.showPopover();
       }
     }),
   );
 
-  return { initPopover$ };
+  const showPopover = $(async () => {
+    if (!didInteractSig.value) {
+      await initPopover$();
+    }
+    popoverSig.value?.showPopover();
+  });
+
+  const togglePopover = $(async () => {
+    if (!didInteractSig.value) {
+      await initPopover$();
+    }
+    popoverSig.value?.togglePopover();
+  });
+
+  const hidePopover = $(async () => {
+    if (!didInteractSig.value) {
+      await initPopover$();
+    }
+    popoverSig.value?.hidePopover();
+  });
+
+  return { showPopover, togglePopover, hidePopover, initPopover$ };
 }
 
 export const PopoverTrigger = component$<PopoverTriggerProps>(
@@ -92,8 +116,8 @@ export const PopoverTrigger = component$<PopoverTriggerProps>(
         onClick$={[
           rest.onClick$,
           !disableClickInitPopover
-            ? $(() => {
-                initPopover$();
+            ? $(async () => {
+                await initPopover$();
               })
             : undefined,
         ]}