fix(VDateInput): add update-on prop (#21249)

fixes #21245
fixes #20964

Author: ikushum

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

@@ -2,6 +2,7 @@
   "props": {
     "hideActions": "Hide the Cancel and OK buttons, and automatically update the value when a date is selected.",
     "displayFormat": "The format of the date that is displayed in the input. Can use any format [here](/features/dates/#format-options) or a custom function.",
-    "location": "Specifies the date picker's location. Can combine by using a space separated string."
+    "location": "Specifies the date picker's location. Can combine by using a space separated string.",
+    "updateOn": "Specifies when the text input should update the model value. If empty, the text field will go into read-only state."
   }
 }

packages/vuetify/src/labs/VDateInput/VDateInput.tsx

@@ -39,8 +39,14 @@ export const makeVDateInputProps = propsFactory({
     type: String as PropType<StrategyProps['location']>,
     default: 'bottom start',
   },
+  updateOn: {
+    type: Array as PropType<('blur' | 'enter')[]>,
+    default: () => ['blur', 'enter'],
+  },
 
-  ...makeDisplayProps(),
+  ...makeDisplayProps({
+    mobile: null,
+  }),
   ...makeFocusProps(),
   ...makeVConfirmEditProps({
     hideActions: true,
@@ -121,7 +127,12 @@ export const VDateInput = genericComponent<VDateInputSlots>()({
     })
 
     const isInteractive = computed(() => !props.disabled && !props.readonly)
-    const isReadonly = computed(() => !(mobile.value && isEditingInput.value) && props.readonly)
+
+    const isReadonly = computed(() => {
+      if (!props.updateOn.length) return true
+
+      return !(mobile.value && isEditingInput.value) && props.readonly
+    })
 
     watch(menu, val => {
       if (val) return
@@ -135,13 +146,12 @@ export const VDateInput = genericComponent<VDateInputSlots>()({
 
       if (!menu.value || !isFocused.value) {
         menu.value = true
-
         return
       }
 
-      const target = e.target as HTMLInputElement
-
-      model.value = adapter.isValid(target.value) ? target.value : null
+      if (props.updateOn.includes('enter')) {
+        onUserInput(e.target as HTMLInputElement)
+      }
     }
 
     function onClick (e: MouseEvent) {
@@ -172,7 +182,11 @@ export const VDateInput = genericComponent<VDateInputSlots>()({
       model.value = null
     }
 
-    function onBlur () {
+    function onBlur (e: FocusEvent) {
+      if (props.updateOn.includes('blur')) {
+        onUserInput(e.target as HTMLInputElement)
+      }
+
       blur()
 
       // When in mobile mode and editing is done (due to keyboard dismissal), close the menu
@@ -182,6 +196,12 @@ export const VDateInput = genericComponent<VDateInputSlots>()({
       }
     }
 
+    function onUserInput ({ value }: HTMLInputElement) {
+      if (value && !adapter.isValid(value)) return
+
+      model.value = !value ? null : value
+    }
+
     useRender(() => {
       const confirmEditProps = VConfirmEdit.filterProps(props)
       const datePickerProps = VDatePicker.filterProps(omit(props, ['active', 'location', 'rounded']))

packages/vuetify/src/labs/VDateInput/__tests__/VDateInput.spec.browser.tsx

@@ -0,0 +1,110 @@
+import { VDateInput } from '../VDateInput'
+
+// Utilities
+import { mount } from '@vue/test-utils'
+import { createVuetify } from '@/framework'
+
+// global.ResizeObserver = require('resize-observer-polyfill')
+
+describe('VDateInput', () => {
+  const vuetify = createVuetify()
+
+  afterEach(() => {
+    vi.clearAllMocks()
+  })
+
+  function mountFunction (component: any, options = {}) {
+    return mount(component, {
+      global: {
+        plugins: [vuetify],
+      },
+      ...options,
+    })
+  }
+
+  describe('update-on prop', () => {
+    const TEST_DATE = '2025-01-01'
+
+    it('should update modelValue only on enter key press', async () => {
+      const wrapper = mountFunction(
+        <VDateInput
+          updateOn={['enter']}
+          modelValue={ null }
+        />
+      )
+      const input = wrapper.find('input')
+
+      await input.trigger('click')
+      await input.trigger('focus')
+      await input.setValue(TEST_DATE)
+
+      await input.trigger('keydown', { key: 'Enter' })
+      expect(wrapper.emitted('update:modelValue')).toBeTruthy()
+
+      await input.trigger('blur')
+      expect(wrapper.emitted('update:modelValue')).toHaveLength(1)
+    })
+
+    it('should update modelValue only on blur event', async () => {
+      const wrapper = mountFunction(
+        <VDateInput
+          updateOn={['blur']}
+          modelValue={ null }
+        />
+      )
+      const input = wrapper.find('input')
+
+      await input.trigger('click')
+      await input.trigger('focus')
+      await input.setValue(TEST_DATE)
+
+      await input.trigger('keydown', { key: 'Enter' })
+      expect(wrapper.emitted('update:modelValue')).toBeFalsy()
+
+      await input.trigger('blur')
+      expect(wrapper.emitted('update:modelValue')).toBeTruthy()
+    })
+
+    it('should update modelValue on both enter key press and blur event', async () => {
+      const wrapper = mountFunction(
+        <VDateInput
+          updateOn={['enter', 'blur']}
+          modelValue={ null }
+        />
+      )
+      const input = wrapper.find('input')
+
+      await input.trigger('click')
+      await input.trigger('focus')
+      await input.setValue(TEST_DATE)
+
+      await input.trigger('keydown', { key: 'Enter' })
+      expect(wrapper.emitted('update:modelValue')).toBeTruthy()
+
+      await input.trigger('blur')
+      expect(wrapper.emitted('update:modelValue')).toHaveLength(2)
+    })
+
+    it('should make the input readonly and prevent value updates', async () => {
+      const wrapper = mountFunction(
+        <VDateInput
+          updateOn={[]}
+          modelValue={ null }
+        />
+      )
+      const input = wrapper.find('input')
+
+      expect(input.attributes('readonly')).toBeDefined()
+      expect(input.element.readOnly).toBe(true)
+
+      await input.trigger('click')
+      await input.trigger('focus')
+
+      await input.setValue(TEST_DATE)
+      await input.trigger('keydown', { key: 'Enter' })
+      await input.trigger('blur')
+
+      expect(wrapper.emitted('update:modelValue')).toBeFalsy()
+    })
+  })
+})