fix(Select/InputMenu): handle focus via label inside a FormField (#4696)

Co-authored-by: Benjamin Canac <[email protected]>

Author: rdjanuar

src/runtime/components/InputMenu.vue

@@ -415,7 +415,6 @@ defineExpose({
   </DefineCreateItemTemplate>
 
   <ComboboxRoot
-    :id="id"
     v-slot="{ modelValue, open }"
     v-bind="rootProps"
     :name="name"
@@ -456,6 +455,7 @@ defineExpose({
 
         <ComboboxInput v-model="searchTerm" as-child>
           <TagsInputInput
+            :id="id"
             ref="inputRef"
             v-bind="{ ...$attrs, ...ariaAttrs }"
             :placeholder="placeholder"
@@ -467,6 +467,7 @@ defineExpose({
 
       <ComboboxInput
         v-else
+        :id="id"
         ref="inputRef"
         :display-value="displayValue"
         v-bind="{ ...$attrs, ...ariaAttrs }"

src/runtime/components/Select.vue

@@ -272,7 +272,12 @@ defineExpose({
     @update:model-value="onUpdate"
     @update:open="onUpdateOpen"
   >
-    <SelectTrigger :id="id" ref="triggerRef" :class="ui.base({ class: [props.ui?.base, props.class] })" v-bind="{ ...$attrs, ...ariaAttrs }">
+    <SelectTrigger
+      :id="id"
+      ref="triggerRef"
+      :class="ui.base({ class: [props.ui?.base, props.class] })"
+      v-bind="{ ...$attrs, ...ariaAttrs }"
+    >
       <span v-if="isLeading || !!avatar || !!slots.leading" :class="ui.leading({ class: props.ui?.leading })">
         <slot name="leading" :model-value="(modelValue as GetModelValue<T, VK, M>)" :open="open" :ui="ui">
           <UIcon v-if="isLeading && leadingIconName" :name="leadingIconName" :class="ui.leadingIcon({ class: props.ui?.leadingIcon })" />

src/theme/select-menu.ts

@@ -8,6 +8,15 @@ export default (options: Required<ModuleOptions>) => {
       input: 'border-b border-default',
       focusScope: 'flex flex-col min-h-0',
       content: (content: string) => [content, 'origin-(--reka-combobox-content-transform-origin) w-(--reka-combobox-trigger-width)']
-    }
+    },
+    compoundVariants: (prev: Record<string, any>[]) => prev.map(item => ({
+      ...item,
+      class: typeof item.class === 'string' ? replaceFocus(item.class) : item.class
+    }))
   }, select(options))
 }
+
+function replaceFocus(str: string): string {
+  return str
+    .replace(/focus:/g, 'focus-visible:')
+}

src/theme/select.ts

@@ -81,6 +81,15 @@ export default (options: Required<ModuleOptions>) => {
           empty: 'p-2 text-base'
         }
       }
-    }
+    },
+    compoundVariants: (prev: Record<string, any>[]) => prev.map(item => ({
+      ...item,
+      class: typeof item.class === 'string' ? replaceFocus(item.class) : item.class
+    }))
   }, input(options))
 }
+
+function replaceFocus(str: string): string {
+  return str
+    .replace(/focus-visible:/g, 'focus:')
+}

test/components/__snapshots__/InputMenu-vue.spec.ts.snap

@@ -219,7 +219,7 @@ exports[`InputMenu > renders with icon correctly 1`] = `
 `;
 
 exports[`InputMenu > renders with id correctly 1`] = `
-"<div dir="ltr" id="id" class="relative inline-flex items-center" style="pointer-events: auto;"><input aria-disabled="false" type="text" aria-expanded="true" aria-controls="" aria-autocomplete="list" role="combobox" autocomplete="off" class="rounded-md transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented w-full border-0 placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary pe-9" value="">
+"<div dir="ltr" class="relative inline-flex items-center" style="pointer-events: auto;"><input aria-disabled="false" type="text" aria-expanded="true" aria-controls="" aria-autocomplete="list" role="combobox" autocomplete="off" class="rounded-md transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented w-full border-0 placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary pe-9" id="id" value="">
   <!--v-if--><button type="button" tabindex="-1" aria-label="Show popup" aria-haspopup="listbox" aria-expanded="true" aria-controls="" data-state="open" aria-disabled="false" class="group absolute inset-y-0 end-0 flex items-center disabled:cursor-not-allowed disabled:opacity-75 pe-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 text-dimmed size-5"></svg></button>
   <!--teleport start-->
   <div data-reka-popper-content-wrapper="" style="position: fixed; left: 0px; top: 0px; transform: translate(0, -200%); min-width: max-content;">

test/components/__snapshots__/InputMenu.spec.ts.snap

@@ -223,7 +223,7 @@ exports[`InputMenu > renders with icon correctly 1`] = `
 `;
 
 exports[`InputMenu > renders with id correctly 1`] = `
-"<div dir="ltr" id="id" class="relative inline-flex items-center" style="pointer-events: auto;"><input aria-disabled="false" type="text" aria-expanded="true" aria-controls="" aria-autocomplete="list" role="combobox" autocomplete="off" class="rounded-md transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented w-full border-0 placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary pe-9" value="" aria-activedescendant="reka-combobox-item-v-0-0-3">
+"<div dir="ltr" class="relative inline-flex items-center" style="pointer-events: auto;"><input aria-disabled="false" type="text" aria-expanded="true" aria-controls="" aria-autocomplete="list" role="combobox" autocomplete="off" class="rounded-md transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented w-full border-0 placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary pe-9" id="id" value="" aria-activedescendant="reka-combobox-item-v-0-0-3">
   <!--v-if--><button type="button" tabindex="-1" aria-label="Show popup" aria-haspopup="listbox" aria-expanded="true" aria-controls="" data-state="open" aria-disabled="false" class="group absolute inset-y-0 end-0 flex items-center disabled:cursor-not-allowed disabled:opacity-75 pe-2.5"><span class="iconify i-lucide:chevron-down shrink-0 text-dimmed size-5" aria-hidden="true"></span></button>
   <!--teleport start-->
   <div data-reka-popper-content-wrapper="" style="position: fixed; left: 0px; top: 0px; transform: translate(0, -200%); min-width: max-content;">