Merge pull request #640 from thejackshelton/main

fix(docs): select examples on safari not showing up because relative …

Author: thejackshelton

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

@@ -30,7 +30,7 @@ export const ContextChild = component$(() => {
   const animals = useContext(AnimalContext);
 
   return (
-    <Combobox options={animals} class="relative">
+    <Combobox options={animals}>
       <ComboboxLabel class=" font-semibold">Animals 🐖</ComboboxLabel>
       <ComboboxControl class="rounded-base relative flex items-center border">
         <ComboboxInput class="px-d2 bg-background placeholder:text-muted-foreground w-44 px-2 pr-6" />

apps/website/src/routes/docs/headless/combobox/examples/custom-filter.tsx

@@ -40,7 +40,7 @@ export default component$(() => {
         })
       }
     >
-      <ComboboxLabel class=" font-semibold">Countries 🚩</ComboboxLabel>
+      <ComboboxLabel class="font-semibold">Countries 🚩</ComboboxLabel>
       <ComboboxControl class="rounded-base relative flex items-center border">
         <ComboboxInput class="px-d2 bg-background placeholder:text-muted-foreground rounded-base w-44 px-2 pr-6" />
         <ComboboxTrigger class="group absolute right-0 h-6 w-6">

apps/website/src/routes/docs/headless/combobox/examples/custom-keys.tsx

@@ -39,7 +39,7 @@ export default component$(() => {
   });
 
   return (
-    <div class="relative">
+    <div>
       {isPokemonCaught.value && (
         <p class="bg-background rounded-base absolute w-full translate-x-[-105%] border-2 p-4 shadow-md">
           You've already caught this pokemon!

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

@@ -41,7 +41,6 @@ export default component$(() => {
       optionValueKey="testValue"
       optionLabelKey="testLabel"
       optionDisabledKey="disabled"
-      class="relative"
       bind:selectedIndex={selectedOptionIndexSig}
     >
       <ComboboxLabel class="font-semibold">Personal Trainers ⚡</ComboboxLabel>

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

@@ -18,7 +18,7 @@ export default component$(() => {
 
   return (
     <div
-      class="relative flex h-[10rem] w-full flex-col items-center gap-4"
+      class="flex h-[10rem] w-full flex-col items-center gap-4"
       style={{ overflow: 'auto', width: '100%' }}
     >
       <div class="h-[1px] w-[2000px]"></div>

apps/website/src/routes/docs/headless/select/examples/select.css

@@ -3,14 +3,14 @@
 }
 
 .select {
-  position: relative;
   min-width: var(--select-width);
 }
 
 .select-trigger {
   width: 100%;
   border: 2px dashed hsla(var(--primary) / 1);
   border-radius: calc(var(--border-radius) / 2);
+  height: 44px;
 }
 
 .select-popover {

apps/website/src/routes/docs/headless/select/index.mdx

@@ -157,7 +157,7 @@ The above example increments a count when the user selects a new option.
 
 We can select an initial uncontrolled value by passing the `value` prop to the `<Select />` root component.
 
-### Uncontrolled
+### Uncontrolled / Initial value
 
 <div data-testid="select-uncontrolled-test">
   <Showcase name="uncontrolled" />
@@ -167,9 +167,9 @@ The above example passes one of the option values "Jessie" as the initial value.
 
 > The `value` prop in Qwik is similar to a `defaultValue` prop in other frameworks. For controlled values, we use signals and the bind syntax.
 
-### Controlled
+### Controlled / Reactive value
 
-We can select a controlled value by passing the `bind:value` prop to the `<Select />` root component.
+We can pass reactive state by using the `bind:value` prop to the `<Select />` root component.
 
 <div data-testid="select-controlled-test">
   <Showcase name="controlled" />

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

@@ -80,7 +80,7 @@ export const FloatingPopover = component$(
     const popoverRef = props.popoverRef || myRef;
 
     // sets floating UI config
-    useTask$(({ track, cleanup }) => {
+    useTask$(async ({ track, cleanup }) => {
       const anchor = track(() => anchorRef?.value);
       const popover = track(() => popoverRef.value);
       if (!popover || !anchor) return;
@@ -99,7 +99,7 @@ export const FloatingPopover = component$(
         await computePosition(anchor as ReferenceElement, popover, {
           placement,
           middleware,
-        }).then((resolvedData) => {
+        }).then(async (resolvedData) => {
           const { x, y } = resolvedData;
 
           Object.assign(popover.style, {

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

@@ -1,4 +1,4 @@
-import { component$, useContext, Slot, useTask$, useId } from '@builder.io/qwik';
+import { component$, useContext, Slot, useTask$ } from '@builder.io/qwik';
 import { Popover, usePopover } from '../popover';
 
 import SelectContextId from './select-context';
@@ -9,25 +9,25 @@ import { isServer } from '@builder.io/qwik/build';
 export const SelectPopover = component$(
   (props: Partial<FloatingProps & PopoverImplProps>) => {
     const context = useContext(SelectContextId);
-    const customPopoverId = useId();
-    const { showPopover, hidePopover } = usePopover(customPopoverId);
+    const popoverId = `${context.localId}-popover`;
+    const { showPopover, hidePopover } = usePopover(popoverId);
 
     useTask$(async ({ track }) => {
       track(() => context.isListboxOpenSig.value);
 
       if (isServer) return;
 
       if (context.isListboxOpenSig.value) {
-        showPopover();
+        await showPopover();
       } else {
-        hidePopover();
+        await hidePopover();
       }
     });
 
     return (
       <Popover
         {...props}
-        id={customPopoverId}
+        id={popoverId}
         floating={true}
         anchorRef={context.triggerRef}
         ref={context.popoverRef}