diff --git a/packages/vuetify/src/labs/VDateInput/VDateInput.tsx b/packages/vuetify/src/labs/VDateInput/VDateInput.tsx index f0303033cf0..2789dd34a94 100644 --- a/packages/vuetify/src/labs/VDateInput/VDateInput.tsx +++ b/packages/vuetify/src/labs/VDateInput/VDateInput.tsx @@ -135,8 +135,6 @@ export const VDateInput = genericComponent()({ if (!menu.value || !isFocused.value) { menu.value = true - - return } const target = e.target as HTMLInputElement diff --git a/packages/vuetify/src/labs/VDateInput/__tests__/VDateInput.spec.browser.tsx b/packages/vuetify/src/labs/VDateInput/__tests__/VDateInput.spec.browser.tsx new file mode 100644 index 00000000000..492858395c7 --- /dev/null +++ b/packages/vuetify/src/labs/VDateInput/__tests__/VDateInput.spec.browser.tsx @@ -0,0 +1,29 @@ +// Components +import { VDateInput } from '../VDateInput' + +// Utilities +import { commands, render, screen, userEvent } from '@test' +import { ref } from 'vue' + +describe('VDateInput', () => { + it('accepts keyboard input even if the picker is hidden', async () => { + const model = ref(null) + const { element } = render(() => ) + + await userEvent.click(element) + await commands.waitStable('.v-picker') + expect(screen.getByCSS('.v-picker')).toBeVisible() + + await userEvent.keyboard('{Escape}') // hide picker, but keep the focus + + await commands.waitStable('.v-picker') + expect(screen.getByCSS('.v-picker')).not.toBeVisible() + + const input = screen.getByCSS('input') as HTMLInputElement + await userEvent.type(input, '02/20/2022{Enter}') + + expect(model.value).toBeDefined() + const formatter = new Intl.DateTimeFormat('en-US', { dateStyle: 'medium' }) + expect(formatter.format(model.value!)).toBe('Feb 20, 2022') + }) +})