fix: combobox label for attribute binding

formwerkjs · Feb 22, 2025 · 04fb9d7 · 04fb9d7
1 parent d34984c
commit 04fb9d7
Show file tree

Hide file tree

Showing 3 changed files with 19 additions and 5 deletions.
diff --git a/.changeset/cold-pots-crash.md b/.changeset/cold-pots-crash.md
@@ -0,0 +1,5 @@
+---
+'@formwerk/core': patch
+---
+
+fix: combobox label for attribute binding
diff --git a/packages/core/src/a11y/useLabel.spec.ts b/packages/core/src/a11y/useLabel.spec.ts
@@ -8,13 +8,21 @@ describe('label element', () => {
     const labelFor = 'input';
 
     await render({
-      setup: () =>
-        useLabel({
-          for: labelFor,
-          label: label,
-        }),
+      setup: () => {
+        const inputRef = ref<HTMLElement>();
+
+        return {
+          inputRef,
+          ...useLabel({
+            for: labelFor,
+            label: label,
+            targetRef: inputRef,
+          }),
+        };
+      },
       template: `
       <label data-testid="label" v-bind="labelProps">Label</label>
+      <input data-testid="input" ref="inputRef" />
     `,
     });
 

diff --git a/packages/core/src/useComboBox/useComboBox.ts b/packages/core/src/useComboBox/useComboBox.ts
@@ -121,6 +121,7 @@ export function useComboBox<TOption, TValue = TOption>(
   const { labelProps, labelledByProps } = useLabel({
     label: props.label,
     for: inputId,
+    targetRef: inputEl,
   });
 
   const { validityDetails } = useInputValidity({ field, inputEl, disableHtmlValidation: props.disableHtmlValidation });