fix: handle popover state manually

.changeset/blue-cups-wonder.md

@@ -0,0 +1,5 @@
+---
+'@formwerk/core': patch
+---
+
+fix: handle popover state manually closes #200

packages/core/src/helpers/usePopoverController/usePopoverController.ts

@@ -1,9 +1,10 @@
-import { MaybeRefOrGetter, Ref, shallowRef, toValue, watch } from 'vue';
+import { MaybeRefOrGetter, onMounted, Ref, shallowRef, toValue, watch } from 'vue';
 import { useEventListener } from '../useEventListener';
 import { Maybe } from '../../types';
 
 interface ControllerInit {
   disabled?: MaybeRefOrGetter<boolean | undefined>;
+  triggerEl?: MaybeRefOrGetter<Maybe<HTMLElement>>;
 }
 
 export function usePopoverController(popoverEl: Ref<Maybe<HTMLElement>>, opts?: ControllerInit) {
@@ -15,7 +16,7 @@
       return;
     }
 
     if (value === el.matches(':popover-open')) {
       return;
     }
 
@@ -43,6 +44,37 @@
     },
   );
 
+  // Click outside listener
+  useEventListener(
+    window,
+    'click',
+    (e: MouseEvent) => {
+      if (e.target instanceof HTMLElement) {
+        if (popoverEl.value?.contains(e.target)) {
+          return;
+        }
+
+        const triggerEl = toValue(opts?.triggerEl);
+        if (triggerEl?.contains(e.target)) {
+          return;
+        }
+      }
+
+      isOpen.value = false;
+    },
+    { disabled: () => toValue(opts?.disabled) || !isOpen.value },
+  );
+
+  useEventListener(opts?.triggerEl, ['focus'], () => {
+    isOpen.value = true;
+  });
+
+  onMounted(() => {
+    if (popoverEl.value) {
+      popoverEl.value.popover = 'manual';
+    }
+  });
+
   return {
     isOpen,
   };

packages/core/src/useComboBox/useComboBox.ts

@@ -156,6 +156,7 @@
     label: props.label,
     multiple: false,
     orientation: props.orientation,
+    triggerEl: inputEl,
     isValueSelected: value => {
       return isEqual(fieldValue.value, value);
     },
@@ -181,7 +182,7 @@
       }
 
       // If an option was clicked, then it would blur the field and so we want to select the clicked option via the `relatedTarget` property.
       let relatedTarget = (evt as any).relatedTarget as HTMLElement | null;
       if (relatedTarget) {
         relatedTarget = relatedTarget.closest('[role="option"]') as HTMLElement | null;
         const opt = renderedOptions.value.find(opt => opt.id === relatedTarget?.id);

packages/core/src/useListBox/useListBox.ts

@@ -20,6 +20,7 @@ export interface ListBoxProps<TOption, TValue = TOption> {
   orientation?: Orientation;
   disabled?: boolean;
   autofocusOnOpen?: boolean;
+  triggerEl?: Maybe<HTMLElement>;
 
   onToggleAll?(): void;
   onToggleBefore?(): void;
@@ -76,7 +77,7 @@ export function useListBox<TOption, TValue = TOption>(
   const finder = useBasicOptionFinder(renderedOptions);
 
   // Initialize popover controller, NO-OP if the element is not a popover-enabled element.
-  const { isOpen } = usePopoverController(listBoxEl, { disabled: props.disabled });
+  const { isOpen } = usePopoverController(listBoxEl, { disabled: props.disabled, triggerEl: props.triggerEl });
   const isShiftPressed = useKeyPressed(['ShiftLeft', 'ShiftRight'], () => !isOpen.value);
   const isMetaPressed = useKeyPressed(
     isMac() ? ['MetaLeft', 'MetaRight'] : ['ControlLeft', 'ControlRight'],

packages/playground/src/App.vue

@@ -1,99 +1,13 @@
 <script setup lang="ts">
-import { useStepFormFlow } from '@formwerk/core';
-import InputText from './components/InputText.vue';
-import InputTextArea from './components/InputTextArea.vue';
-import z from 'zod';
-
-const {
-  formProps,
-  nextButtonProps,
-  previousButtonProps,
-  onDone,
-  isLastStep,
-  FormStep,
-  goToStep,
-  isCurrentStep,
-  getStepValue,
-  onBeforeStepResolve,
-} = useStepFormFlow({});
-
-onBeforeStepResolve(ctx => {
-  if (ctx.currentStep.name === 'step-1' && ctx.values.name === 'ahmad') {
-    return 'step-3';
-  }
-
-  return ctx.next();
-});
-
-const step1 = z.object({
-  name: z.string(),
-  email: z.string().email(),
-});
-
-const step2 = z.object({
-  address: z.string(),
-});
-
-onDone(data => {
-  console.log(data.toObject());
-});
+import ComboBox from './components/ComboBox.vue';
+import OptionItem from './components/OptionItem.vue';
 </script>
 
 <template>
-  <form v-bind="formProps" class="w-full h-full flex flex-col items-center justify-center">
-    <div class="flex gap-2 my-8">
-      <button
-        type="button"
-        class="bg-gray-700 p-2 rounded-full aria-selected:bg-emerald-500 hover:bg-gray-500"
-        :aria-selected="isCurrentStep(0)"
-        @click="goToStep(0)"
-      >
-        Go to step 1
-      </button>
-      <button
-        type="button"
-        class="bg-gray-700 p-2 rounded-full aria-selected:bg-emerald-500 hover:bg-gray-500"
-        :aria-selected="isCurrentStep(1)"
-        @click="goToStep(1)"
-      >
-        Go to step 2
-      </button>
-      <button
-        type="button"
-        class="bg-gray-700 p-2 rounded-full aria-selected:bg-emerald-500 hover:bg-gray-500"
-        :aria-selected="isCurrentStep(2)"
-        @click="goToStep(2)"
-      >
-        Go to step 3
-      </button>
-    </div>
-
-    <FormStep name="step-1" :schema="step1">
-      {{ getStepValue(0) }}
-
-      <InputText name="name" label="Name" />
-      <InputText name="email" label="Email" />
-    </FormStep>
-
-    <FormStep name="step-2" :schema="step2">
-      {{ getStepValue(1) }}
-
-      <InputTextArea name="address" label="Address" />
-    </FormStep>
-
-    <FormStep name="step-3">
-      {{ getStepValue(2) }}
-
-      <InputText name="city" label="City" />
-    </FormStep>
-
-    <div class="mt-10 grid grid-cols-2 gap-4">
-      <button class="bg-gray-700 p-2 rounded-md" v-bind="previousButtonProps">⬅️ Previous</button>
-      <button class="bg-gray-700 p-2 rounded-md" v-bind="nextButtonProps">
-        {{ isLastStep ? 'Submit' : 'Next ➡️' }}
-      </button>
-    </div>
-  </form>
+  <ComboBox label="test">
+    <OptionItem label="TEST" value="1" />
+    <OptionItem label="TEST2" value="2" />
+  </ComboBox>
 </template>
 
 <style>