feat(VTextField, VTextarea): add autocomplete prop (#21359)

resolves #21353

Author: J-Sek

packages/api-generator/src/locale/en/VSelect.json

@@ -1,6 +1,5 @@
 {
   "props": {
-    "autocomplete": "Filter the items in the list based on user input.",
     "cacheItems": "Keeps a local _unique_ copy of all items that have been passed through the **items** prop.",
     "chips": "Changes display of selections to chips.",
     "closableChips": "Enables the [closable](/api/v-chip/#props-closable) prop on all [v-chip](/components/chips/) components.",

packages/api-generator/src/locale/en/autocomplete.json

@@ -0,0 +1,5 @@
+{
+  "props": {
+    "autocomplete": "Helps influence browser's suggestions. Special value **suppress** manipulates fields `name` attribute while **off** relies on browser's good will to stop suggesting values. Any other value is passed to the native `autocomplete` on the underlying element."
+  }
+}

packages/docs/src/data/new-in.json

@@ -14,6 +14,7 @@
   },
   "VAutocomplete": {
     "props": {
+      "autocomplete": "3.10.0",
       "autoSelectFirst": "3.3.0",
       "clearOnSelect": "3.5.0",
       "listProps": "3.5.0"
@@ -57,6 +58,7 @@
   },
   "VCombobox": {
     "props": {
+      "autocomplete": "3.10.0",
       "clearOnSelect": "3.5.0",
       "listProps": "3.5.0"
     }
@@ -141,6 +143,11 @@
       "persistent": "3.6.0"
     }
   },
+  "VNumberInput": {
+    "props": {
+      "autocomplete": "3.10.0"
+    }
+  },
   "VOverlay": {
     "props": {
       "stickToTarget": "3.10.0"
@@ -160,6 +167,7 @@
   },
   "VSelect": {
     "props": {
+      "autocomplete": "3.10.0",
       "listProps": "3.5.0",
       "noAutoScroll": "3.9.0"
     }
@@ -193,6 +201,11 @@
       "text": "3.2.0"
     }
   },
+  "VTextField": {
+    "props": {
+      "autocomplete": "3.10.0"
+    }
+  },
   "VTimePicker": {
     "props": {
       "hideTitle": "3.10.0",

packages/vuetify/src/components/VTextField/VTextField.tsx

@@ -7,6 +7,7 @@ import { makeVFieldProps, VField } from '@/components/VField/VField'
 import { makeVInputProps, VInput } from '@/components/VInput/VInput'
 
 // Composables
+import { makeAutocompleteProps, useAutocomplete } from '@/composables/autocomplete'
 import { useAutofocus } from '@/composables/autofocus'
 import { useFocus } from '@/composables/focus'
 import { forwardRefs } from '@/composables/forwardRefs'
@@ -43,6 +44,7 @@ export const makeVTextFieldProps = propsFactory({
   },
   modelModifiers: Object as PropType<Record<string, boolean>>,
 
+  ...makeAutocompleteProps(),
   ...makeVInputProps(),
   ...makeVFieldProps(),
 }, 'VTextField')
@@ -94,13 +96,18 @@ export const VTextField = genericComponent<VTextFieldSlots>()({
     const vInputRef = ref<VInput>()
     const vFieldRef = ref<VField>()
     const inputRef = ref<HTMLInputElement>()
+    const autocomplete = useAutocomplete(props)
     const isActive = computed(() => (
       activeTypes.includes(props.type) ||
       props.persistentPlaceholder ||
       isFocused.value ||
       props.active
     ))
     function onFocus () {
+      if (autocomplete.isSuppressing.value) {
+        autocomplete.update()
+      }
+
       if (!isFocused.value) focus()
 
       nextTick(() => {
@@ -217,7 +224,8 @@ export const VTextField = genericComponent<VTextFieldSlots>()({
                         autofocus={ props.autofocus }
                         readonly={ isReadonly.value }
                         disabled={ isDisabled.value }
-                        name={ props.name }
+                        name={ autocomplete.fieldName.value }
+                        autocomplete={ autocomplete.fieldAutocomplete.value }
                         placeholder={ props.placeholder }
                         size={ 1 }
                         type={ props.type }

packages/vuetify/src/components/VTextarea/VTextarea.tsx

@@ -9,6 +9,7 @@ import { makeVFieldProps } from '@/components/VField/VField'
 import { makeVInputProps, VInput } from '@/components/VInput/VInput'
 
 // Composables
+import { makeAutocompleteProps, useAutocomplete } from '@/composables/autocomplete'
 import { useAutofocus } from '@/composables/autofocus'
 import { useFocus } from '@/composables/focus'
 import { forwardRefs } from '@/composables/forwardRefs'
@@ -49,6 +50,7 @@ export const makeVTextareaProps = propsFactory({
   suffix: String,
   modelModifiers: Object as PropType<Record<string, boolean>>,
 
+  ...makeAutocompleteProps(),
   ...makeVInputProps(),
   ...makeVFieldProps(),
 }, 'VTextarea')
@@ -99,13 +101,18 @@ export const VTextarea = genericComponent<VTextareaSlots>()({
     const vFieldRef = ref<VInput>()
     const controlHeight = shallowRef('')
     const textareaRef = ref<HTMLInputElement>()
+    const autocomplete = useAutocomplete(props)
     const isActive = computed(() => (
       props.persistentPlaceholder ||
       isFocused.value ||
       props.active
     ))
 
     function onFocus () {
+      if (autocomplete.isSuppressing.value) {
+        autocomplete.update()
+      }
+
       if (textareaRef.value !== document.activeElement) {
         textareaRef.value?.focus()
       }
@@ -283,7 +290,8 @@ export const VTextarea = genericComponent<VTextareaSlots>()({
                         disabled={ isDisabled.value }
                         placeholder={ props.placeholder }
                         rows={ props.rows }
-                        name={ props.name }
+                        name={ autocomplete.fieldName.value }
+                        autocomplete={ autocomplete.fieldAutocomplete.value }
                         onFocus={ onFocus }
                         onBlur={ blur }
                         { ...slotProps }

packages/vuetify/src/components/VTextarea/__tests__/VTextarea.spec.browser.tsx

@@ -19,7 +19,7 @@ describe('VTextarea', () => {
       </Application>
     ))
 
-    const el = screen.getByCSS('#input-v-0')
+    const el = screen.getByCSS('textarea[rows]')
 
     expect(el.offsetHeight).toBe(56)
 
@@ -43,7 +43,7 @@ describe('VTextarea', () => {
       </Application>
     ))
 
-    const el = screen.getByCSS('#input-v-0')
+    const el = screen.getByCSS('textarea[rows]')
 
     expect(el.offsetHeight).toBe(56)
 

packages/vuetify/src/composables/__tests__/autocomplete.spec.ts

@@ -0,0 +1,58 @@
+// Composables
+import { makeAutocompleteProps, useAutocomplete } from '../autocomplete'
+
+// Utilities
+import { mount } from '@vue/test-utils'
+import { defineComponent, h, nextTick } from 'vue'
+
+// Types
+import type { InputAutocompleteProps } from '../autocomplete'
+
+describe('input-autocomplete', () => {
+  function mountFunction (props: Partial<InputAutocompleteProps> = {}) {
+    return mount(defineComponent({
+      props: {
+        name: String,
+        ...makeAutocompleteProps(),
+      },
+      setup (props) {
+        const { fieldAutocomplete, fieldName, isSuppressing, update } = useAutocomplete(props)
+
+        return () => h('input', {
+          autocomplete: fieldAutocomplete.value,
+          name: fieldName.value,
+          onFocus: () => isSuppressing.value && update(),
+        })
+      },
+    }), { props })
+  }
+
+  it.each([
+    [{ autocomplete: undefined, name: undefined }],
+    [{ autocomplete: 'on', name: undefined }],
+    [{ autocomplete: undefined, name: 'username' }],
+    [{ autocomplete: 'current-password', name: 'password' }],
+    [{ autocomplete: 'shipping street-address', name: 'shipping-address' }],
+    [{ autocomplete: 'off', name: 'email' }],
+  ])('should pass through regular props', async (props: InputAutocompleteProps) => {
+    const wrapper = mountFunction(props)
+
+    expect(wrapper.vm.$el.autocomplete).toEqual(props.autocomplete ?? '')
+    expect(wrapper.vm.$el.name).toEqual(props.name ?? '')
+
+    wrapper.trigger('focus')
+    await nextTick()
+    expect(wrapper.vm.$el.name).toEqual(props.name ?? '')
+  })
+
+  it('[suppress] should update field name on focus', async () => {
+    const wrapper = mountFunction({ autocomplete: 'suppress', name: 'username' })
+
+    expect(wrapper.vm.$el.autocomplete).toBe('off')
+    expect(wrapper.vm.$el.name).toBe('username-v-0-0')
+
+    wrapper.trigger('focus')
+    await nextTick()
+    expect(wrapper.vm.$el.name).toMatch(/username-v-0-\d{13}/)
+  })
+})

packages/vuetify/src/composables/autocomplete.ts

@@ -0,0 +1,43 @@
+// Utilities
+import { shallowRef, toRef, useId } from 'vue'
+import { propsFactory } from '@/util'
+
+// Types
+import type { PropType } from 'vue'
+
+// Types
+export interface InputAutocompleteProps {
+  autocomplete: 'suppress' | string | undefined
+  name?: string
+}
+
+// Composables
+export const makeAutocompleteProps = propsFactory({
+  autocomplete: String as PropType<'suppress' | string>,
+}, 'autocomplete')
+
+export function useAutocomplete (props: InputAutocompleteProps) {
+  const uniqueId = useId()
+  const reloadTrigger = shallowRef(0)
+
+  const isSuppressing = toRef(() => props.autocomplete === 'suppress')
+
+  const fieldName = toRef(() => {
+    return isSuppressing.value
+      ? `${props.name}-${uniqueId}-${reloadTrigger.value}`
+      : props.name
+  })
+
+  const fieldAutocomplete = toRef(() => {
+    return isSuppressing.value
+      ? 'off'
+      : props.autocomplete
+  })
+
+  return {
+    isSuppressing,
+    fieldAutocomplete,
+    fieldName,
+    update: () => reloadTrigger.value = new Date().getTime(),
+  }
+}