Merge pull request #568 from thejackshelton/popover-improvements

fix(popover combobox): fixes floating ui flicker, animations

Author: thejackshelton

apps/website/src/routes/docs/headless/combobox/examples/hero.css

@@ -12,7 +12,6 @@ import {
 } from '@qwik-ui/headless';
 
 import { component$ } from '@builder.io/qwik';
-import './hero.css';
 
 export default component$(() => {
   const objectExample = [

apps/website/src/routes/docs/headless/combobox/examples/hero.tsx

@@ -28,10 +28,10 @@ export default component$(() => {
   
   @keyframes fadeOut {
     from {
-      opacity: 0;
+      opacity: 1;
     }
     to {
-      opacity: 1;
+      opacity: 0;
     }
   }
   

apps/website/src/routes/docs/headless/popover/examples/listbox-animation.tsx

@@ -85,8 +85,7 @@ export const FloatingPopover = component$(
       const anchor = track(() => anchorRef?.value);
       const popover = track(() => popoverRef.value);
       if (!popover || !anchor) return;
-
-      console.log('INSIDE FLOATING: ', popoverRef.value);
+      popover.hidden = false;
 
       const updatePosition = async () => {
         const middleware = [
@@ -108,7 +107,6 @@ export const FloatingPopover = component$(
             // ensures no exit animation when anchor is hidden.
             popover.hidden = true;
           } else {
-            popover.hidden = false;
             Object.assign(popover.style, {
               left: `${x}px`,
               top: `${y}px`,
@@ -133,7 +131,7 @@ export const FloatingPopover = component$(
     });
 
     return (
-      <PopoverImpl {...props} ref={popoverRef}>
+      <PopoverImpl hidden={true} {...props} ref={popoverRef}>
         <Slot />
       </PopoverImpl>
     );

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

@@ -11,7 +11,7 @@ export function supportShowAnimation(popover: HTMLElement, isPolyfill: boolean)
       setTimeout(() => {
         popover.classList.add('popover-showing');
         popover.classList.remove('popover-closing');
-      }, 5);
+      }, 10);
     } else {
       popover.classList.add('popover-showing');
       popover.classList.remove('popover-closing');