From 916469c6f53d1c0d62f3219677e5af7d4bcf451b Mon Sep 17 00:00:00 2001
From: Shevchik Igor <noreply@anthropic.com>
Date: Fri, 5 Jun 2026 15:33:10 +0000
Subject: [PATCH 1/2] feat(InputMenu)!: rename `autocomplete` prop to `mode`
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Aligns with nuxt/ui v4.8.0. The boolean `autocomplete` prop becomes
`mode?: 'combobox' | 'autocomplete'` (default `'combobox'`), which frees the
native HTML `autocomplete` attribute to be forwarded again.

- InputMenu: add `mode` prop + internal `isAutocomplete` computed; stop omitting
  the native `autocomplete` attribute from InputHTMLAttributes
- docs + autocomplete example use `mode="autocomplete"`
- tests use `mode: 'autocomplete'` (snapshots unchanged — render is identical)

Closes #61

BREAKING CHANGE: InputMenu's `autocomplete` prop is renamed to `mode`.
Migrate `:autocomplete="true"` to `mode="autocomplete"`.
---
 .../InputMenuAutocompleteExample.vue          |  2 +-
 docs/content/docs/2.components/input-menu.md  |  4 +--
 src/runtime/components/InputMenu.vue          | 35 ++++++++++---------
 test/components/InputMenu.spec.ts             | 16 ++++-----
 4 files changed, 30 insertions(+), 27 deletions(-)

diff --git a/docs/app/components/content/examples/input-menu/InputMenuAutocompleteExample.vue b/docs/app/components/content/examples/input-menu/InputMenuAutocompleteExample.vue
index 579fe3183..78702515d 100644
--- a/docs/app/components/content/examples/input-menu/InputMenuAutocompleteExample.vue
+++ b/docs/app/components/content/examples/input-menu/InputMenuAutocompleteExample.vue
@@ -6,7 +6,7 @@ const value = ref('')
 <template>
   <B24InputMenu
     v-model="value"
-    autocomplete
+    mode="autocomplete"
     :items="items"
     :content="{ hideWhenEmpty: true }"
     placeholder="Type a status..."
diff --git a/docs/content/docs/2.components/input-menu.md b/docs/content/docs/2.components/input-menu.md
index ad58a5048..4c02f0008 100644
--- a/docs/content/docs/2.components/input-menu.md
+++ b/docs/content/docs/2.components/input-menu.md
@@ -260,7 +260,7 @@ props:
 
 ### Autocomplete
 
-Use the `autocomplete` prop to turn the InputMenu into a free-form text input with suggestions. The `modelValue` becomes the input text (`string`) instead of a selected item.
+Use the `mode` prop set to `autocomplete` to turn the InputMenu into a free-form text input with suggestions. The `modelValue` becomes the input text (`string`) instead of a selected item.
 
 ::component-example
 ---
@@ -269,7 +269,7 @@ name: 'input-menu-autocomplete-example'
 ::
 
 ::caution
-When `autocomplete` is `true`, `multiple`, `by`, `resetSearchTermOnSelect` and `resetModelValueOnClear` are not applicable.
+When `mode` is `autocomplete`, `multiple`, `by`, `resetSearchTermOnSelect` and `resetModelValueOnClear` are not applicable.
 ::
 
 ::tip
diff --git a/src/runtime/components/InputMenu.vue b/src/runtime/components/InputMenu.vue
index d5b331457..d83edf11c 100644
--- a/src/runtime/components/InputMenu.vue
+++ b/src/runtime/components/InputMenu.vue
@@ -41,7 +41,7 @@ type IsClearUsed<M extends boolean, C extends boolean | object> = M extends fals
   ? (C extends true ? null : C extends object ? null : never)
   : never
 
-export interface InputMenuProps<T extends ArrayOrNested<InputMenuItem> = ArrayOrNested<InputMenuItem>, VK extends GetItemKeys<T> | undefined = undefined, M extends boolean = false, Mod extends Omit<ModelModifiers, 'lazy'> = Omit<ModelModifiers, 'lazy'>, C extends boolean | object = false> extends Pick<ComboboxRootProps<T>, 'open' | 'defaultOpen' | 'disabled' | 'name' | 'resetSearchTermOnBlur' | 'resetSearchTermOnSelect' | 'resetModelValueOnClear' | 'highlightOnHover' | 'openOnClick' | 'openOnFocus' | 'by'>, UseComponentIconsProps, /** @vue-ignore */ Omit<InputHTMLAttributes, 'autocomplete' | 'disabled' | 'name' | 'type' | 'placeholder' | 'autofocus' | 'maxlength' | 'minlength' | 'pattern' | 'size' | 'min' | 'max' | 'step'> {
+export interface InputMenuProps<T extends ArrayOrNested<InputMenuItem> = ArrayOrNested<InputMenuItem>, VK extends GetItemKeys<T> | undefined = undefined, M extends boolean = false, Mod extends Omit<ModelModifiers, 'lazy'> = Omit<ModelModifiers, 'lazy'>, C extends boolean | object = false> extends Pick<ComboboxRootProps<T>, 'open' | 'defaultOpen' | 'disabled' | 'name' | 'resetSearchTermOnBlur' | 'resetSearchTermOnSelect' | 'resetModelValueOnClear' | 'highlightOnHover' | 'openOnClick' | 'openOnFocus' | 'by'>, UseComponentIconsProps, /** @vue-ignore */ Omit<InputHTMLAttributes, 'disabled' | 'name' | 'type' | 'placeholder' | 'autofocus' | 'maxlength' | 'minlength' | 'pattern' | 'size' | 'min' | 'max' | 'step'> {
   /**
    * The element or component this component should render as.
    * @defaultValue 'div'
@@ -173,11 +173,13 @@ export interface InputMenuProps<T extends ArrayOrNested<InputMenuItem> = ArrayOr
   /** Keep the mobile text size on all breakpoints. (Left for backward compatibility.) */
   fixed?: boolean
   /**
-   * When `true`, the input accepts free-form text with optional suggestions.
-   * The `modelValue` becomes the input text (string) instead of a selected item.
-   * @defaultValue false
+   * The behavior of the InputMenu.
+   * - `combobox`: select one (or many) items from a list of suggestions.
+   * - `autocomplete`: free-form text input with optional suggestions. The `modelValue`
+   *   becomes the input text (`string`) instead of a selected item.
+   * @defaultValue 'combobox'
    */
-  autocomplete?: boolean
+  mode?: 'combobox' | 'autocomplete'
   /**
    * Determines if custom user input that does not exist in options can be added.
    * @defaultValue false
@@ -294,9 +296,10 @@ const { t } = useLocale()
 const appConfig = useAppConfig() as InputMenu['AppConfig']
 const { filterGroups } = useFilter()
 
+const isAutocomplete = computed(() => props.mode === 'autocomplete')
 const rootPropsPick = reactivePick(props, 'as', 'modelValue', 'defaultValue', 'open', 'defaultOpen', 'required', 'multiple', 'resetSearchTermOnBlur', 'resetSearchTermOnSelect', 'resetModelValueOnClear', 'highlightOnHover', 'openOnClick', 'openOnFocus', 'by')
-const rootProps = useForwardProps(props.autocomplete ? reactiveOmit(rootPropsPick, 'multiple', 'resetSearchTermOnSelect', 'resetModelValueOnClear', 'by') : rootPropsPick, emits)
-const Component = computed(() => props.autocomplete ? Autocomplete : Combobox)
+const rootProps = useForwardProps(isAutocomplete.value ? reactiveOmit(rootPropsPick, 'multiple', 'resetSearchTermOnSelect', 'resetModelValueOnClear', 'by') : rootPropsPick, emits)
+const Component = computed(() => isAutocomplete.value ? Autocomplete : Combobox)
 const portalProps = usePortal(toRef(() => props.portal))
 const contentProps = toRef(() => defu(props.content, { side: 'bottom', sideOffset: 8, collisionPadding: 8, position: 'popper' }) as ComboboxContentProps)
 const arrowProps = toRef(() => defu(typeof props.arrow === 'boolean' ? {} : props.arrow, { width: 20, height: 10 }) as ComboboxArrowProps)
@@ -409,7 +412,7 @@ function autoFocus() {
 
 onMounted(() => {
   nextTick(() => {
-    if (props.autocomplete) {
+    if (isAutocomplete.value) {
       searchTerm.value = String(props.modelValue ?? props.defaultValue ?? '')
     } else {
       searchTerm.value = ''
@@ -422,7 +425,7 @@ onMounted(() => {
 })
 
 watch(() => props.modelValue, (newValue) => {
-  if (props.autocomplete) {
+  if (isAutocomplete.value) {
     searchTerm.value = String(newValue ?? '')
   }
 })
@@ -454,7 +457,7 @@ function onUpdate(value: any) {
   emitFormChange()
   emitFormInput()
 
-  if (props.autocomplete) {
+  if (isAutocomplete.value) {
     searchTerm.value = String(value ?? '')
   } else if (props.resetSearchTermOnSelect) {
     searchTerm.value = ''
@@ -462,7 +465,7 @@ function onUpdate(value: any) {
 }
 
 function onInputUpdate(value: string) {
-  if (!props.autocomplete) {
+  if (!isAutocomplete.value) {
     searchTerm.value = value
   }
 }
@@ -488,7 +491,7 @@ function onUpdateOpen(value: boolean) {
 
     // Since we use `displayValue` prop inside ComboboxInput we should reset searchTerm manually
     // https://reka-ui.com/docs/components/combobox#api-reference
-    if (!props.autocomplete && props.resetSearchTermOnBlur) {
+    if (!isAutocomplete.value && props.resetSearchTermOnBlur) {
       const STATE_ANIMATION_DELAY_MS = 100
 
       timeoutId = setTimeout(() => {
@@ -620,7 +623,7 @@ defineExpose({
         </span>
 
         <span data-slot="itemTrailing" :class="b24ui.itemTrailing({ class: [props.b24ui?.itemTrailing, isInputItem(item) && item.b24ui?.itemTrailing], colorItem: isInputItem(item) ? item?.color : undefined })">
-          <Component.ItemIndicator v-if="!props.autocomplete" as-child>
+          <Component.ItemIndicator v-if="!isAutocomplete" as-child>
             <Component
               :is="props.selectedIcon || icons.check"
               data-slot="itemTrailingIcon"
@@ -657,7 +660,7 @@ defineExpose({
     :disabled="disabled"
     data-slot="root"
     :class="b24ui.root({ class: [props.b24ui?.root, props.class] })"
-    :as-child="!!props.multiple && !props.autocomplete"
+    :as-child="!!props.multiple && !isAutocomplete"
     ignore-filter
     @update:model-value="onUpdate"
     @update:open="onUpdateOpen"
@@ -672,7 +675,7 @@ defineExpose({
     />
     <Component.Anchor :as-child="!props.multiple" data-slot="base" :class="b24ui.base({ class: props.b24ui?.base })">
       <TagsInputRoot
-        v-if="props.multiple && !props.autocomplete"
+        v-if="props.multiple && !isAutocomplete"
         v-slot="{ modelValue: tags }"
         :model-value="(modelValue as string[])"
         :disabled="disabled"
@@ -726,7 +729,7 @@ defineExpose({
         v-else
         :id="id"
         ref="inputRef"
-        v-bind="{ ...(!props.autocomplete ? { displayValue } : {}), ...$attrs, ...ariaAttrs }"
+        v-bind="{ ...(!isAutocomplete ? { displayValue } : {}), ...$attrs, ...ariaAttrs }"
         :type="props.type"
         :placeholder="props.placeholder"
         :required="props.required"
diff --git a/test/components/InputMenu.spec.ts b/test/components/InputMenu.spec.ts
index e030952e2..cfe59979d 100644
--- a/test/components/InputMenu.spec.ts
+++ b/test/components/InputMenu.spec.ts
@@ -58,11 +58,11 @@ describe('InputMenu', () => {
     ['with disabled', { props: { ...props, disabled: true } }],
     ['with required', { props: { ...props, required: true } }],
     // Autocomplete
-    ['with autocomplete', { props: { ...props, autocomplete: true } }],
-    ['with autocomplete and modelValue', { props: { ...props, autocomplete: true, modelValue: 'Backlog' } }],
-    ['with autocomplete and defaultValue', { props: { ...props, autocomplete: true, defaultValue: 'Backlog' } }],
-    ['with autocomplete and placeholder', { props: { ...props, autocomplete: true, placeholder: 'Type something...' } }],
-    ['with autocomplete and content', { props: { ...props, autocomplete: true, content: { hideWhenEmpty: true } } }],
+    ['with autocomplete', { props: { ...props, mode: 'autocomplete' } }],
+    ['with autocomplete and modelValue', { props: { ...props, mode: 'autocomplete', modelValue: 'Backlog' } }],
+    ['with autocomplete and defaultValue', { props: { ...props, mode: 'autocomplete', defaultValue: 'Backlog' } }],
+    ['with autocomplete and placeholder', { props: { ...props, mode: 'autocomplete', placeholder: 'Type something...' } }],
+    ['with autocomplete and content', { props: { ...props, mode: 'autocomplete', content: { hideWhenEmpty: true } } }],
     ['with icon', { props: { icon: SignIcon } }],
     ['with leading and icon', { props: { leading: true, icon: SignIcon } }],
     ['with trailingIcon', { props: { trailingIcon: SignIcon } }],
@@ -162,21 +162,21 @@ describe('InputMenu', () => {
     })
 
     test('update:modelValue event with autocomplete', async () => {
-      const wrapper = mount(InputMenu, { props: { items: ['Option 1', 'Option 2'], autocomplete: true } })
+      const wrapper = mount(InputMenu, { props: { items: ['Option 1', 'Option 2'], mode: 'autocomplete' } })
       const input = wrapper.findComponent({ name: 'AutocompleteRoot' })
       await input.setValue('Option 1')
       expect(wrapper.emitted()).toMatchObject({ 'update:modelValue': [['Option 1']] })
     })
 
     test('change event with autocomplete', async () => {
-      const wrapper = mount(InputMenu, { props: { items: ['Option 1', 'Option 2'], autocomplete: true } })
+      const wrapper = mount(InputMenu, { props: { items: ['Option 1', 'Option 2'], mode: 'autocomplete' } })
       const input = wrapper.findComponent({ name: 'AutocompleteRoot' })
       await input.setValue('Option 1')
       expect(wrapper.emitted()).toMatchObject({ change: [[{ type: 'change' }]] })
     })
 
     test('searchTerm syncs when parent updates modelValue in autocomplete mode', async () => {
-      const wrapper = mount(InputMenu, { props: { items: ['Option 1', 'Option 2'], autocomplete: true, modelValue: 'Option 1' } })
+      const wrapper = mount(InputMenu, { props: { items: ['Option 1', 'Option 2'], mode: 'autocomplete', modelValue: 'Option 1' } })
 
       await wrapper.setProps({ modelValue: 'Option 2' })
 

From cba9605fbfa9c298e22c320b91604fbbb5bf1efe Mon Sep 17 00:00:00 2001
From: Shevchik Igor <noreply@anthropic.com>
Date: Fri, 5 Jun 2026 16:19:12 +0000
Subject: [PATCH 2/2] fix(InputMenu): make rootProps reactive to mode + cover
 native autocomplete

Review follow-ups for the autocomplete->mode port:
- Wrap the rootProps source in computed() so switching mode at runtime
  recomputes the forwarded props (matches nuxt/ui v4 upstream; b24ui
  useForwardProps already accepts a ref, as in NavigationMenu).
- Add a test asserting the freed native autocomplete attribute now reaches
  the <input>.
---
 src/runtime/components/InputMenu.vue | 3 ++-
 test/components/InputMenu.spec.ts    | 5 +++++
 2 files changed, 7 insertions(+), 1 deletion(-)

diff --git a/src/runtime/components/InputMenu.vue b/src/runtime/components/InputMenu.vue
index d83edf11c..5e486094e 100644
--- a/src/runtime/components/InputMenu.vue
+++ b/src/runtime/components/InputMenu.vue
@@ -298,7 +298,8 @@ const { filterGroups } = useFilter()
 
 const isAutocomplete = computed(() => props.mode === 'autocomplete')
 const rootPropsPick = reactivePick(props, 'as', 'modelValue', 'defaultValue', 'open', 'defaultOpen', 'required', 'multiple', 'resetSearchTermOnBlur', 'resetSearchTermOnSelect', 'resetModelValueOnClear', 'highlightOnHover', 'openOnClick', 'openOnFocus', 'by')
-const rootProps = useForwardProps(isAutocomplete.value ? reactiveOmit(rootPropsPick, 'multiple', 'resetSearchTermOnSelect', 'resetModelValueOnClear', 'by') : rootPropsPick, emits)
+const rootPropsOmitted = reactiveOmit(rootPropsPick, 'multiple', 'resetSearchTermOnSelect', 'resetModelValueOnClear', 'by')
+const rootProps = useForwardProps(computed(() => isAutocomplete.value ? rootPropsOmitted : rootPropsPick), emits)
 const Component = computed(() => isAutocomplete.value ? Autocomplete : Combobox)
 const portalProps = usePortal(toRef(() => props.portal))
 const contentProps = toRef(() => defu(props.content, { side: 'bottom', sideOffset: 8, collisionPadding: 8, position: 'popper' }) as ComboboxContentProps)
diff --git a/test/components/InputMenu.spec.ts b/test/components/InputMenu.spec.ts
index cfe59979d..607ef9f50 100644
--- a/test/components/InputMenu.spec.ts
+++ b/test/components/InputMenu.spec.ts
@@ -184,6 +184,11 @@ describe('InputMenu', () => {
       expect(emissions).toBeTruthy()
       expect(emissions![emissions!.length - 1]).toEqual(['Option 2'])
     })
+
+    test('forwards the native autocomplete attribute to the input', () => {
+      const wrapper = mount(InputMenu, { props: { items: ['Option 1', 'Option 2'] }, attrs: { autocomplete: 'email' } })
+      expect(wrapper.find('input').attributes('autocomplete')).toBe('email')
+    })
   })
 
   describe('it should display correct label', () => {