Skip to content

Commit dd894b9

Browse files
J-SekJ-Sek
committed
fix(VAutocomplete/VCombobox): consistent open/close transition
1 parent ca85fc0 commit dd894b9

File tree

4 files changed

+28
-19
lines changed

4 files changed

+28
-19
lines changed

‎packages/vuetify/src/components/VAutocomplete/VAutocomplete.tsx

Lines changed: 0 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -22,7 +22,6 @@ import { forwardRefs } from '@/composables/forwardRefs'
2222
import { useItems } from '@/composables/list-items'
2323
import { useLocale } from '@/composables/locale'
2424
import { useProxiedModel } from '@/composables/proxiedModel'
25-
import { makeTransitionProps } from '@/composables/transition'
2625

2726
// Utilities
2827
import { computed, mergeProps, nextTick, ref, shallowRef, watch } from 'vue'
@@ -87,7 +86,6 @@ export const makeVAutocompleteProps = propsFactory({
8786
modelValue: null,
8887
role: 'combobox',
8988
}), ['validationValue', 'dirty', 'appendInnerIcon']),
90-
...makeTransitionProps({ transition: false }),
9189
}, 'VAutocomplete')
9290

9391
type ItemType<T> = T extends readonly (infer U)[] ? U : never
@@ -368,7 +366,6 @@ export const VAutocomplete = genericComponent<new <
368366
// watch for search watcher to trigger
369367
nextTick(() => {
370368
menu.value = false
371-
isPristine.value = true
372369
})
373370
}
374371
}
@@ -470,7 +467,6 @@ export const VAutocomplete = genericComponent<new <
470467
maxHeight={ 310 }
471468
openOnClick={ false }
472469
closeOnContentClick={ false }
473-
transition={ props.transition }
474470
onAfterEnter={ onAfterEnter }
475471
onAfterLeave={ onAfterLeave }
476472
{ ...props.menuProps }

‎packages/vuetify/src/components/VAutocomplete/__tests__/VAutocomplete.spec.browser.tsx

Lines changed: 8 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,7 @@ import { VForm } from '@/components/VForm'
55
// Utilities
66
import { generate, render, screen, userEvent, waitAnimationFrame, waitIdle } from '@test'
77
import { findAllByRole, queryAllByRole, within } from '@testing-library/vue'
8+
import { commands } from '@vitest/browser/context'
89
import { cloneVNode, ref } from 'vue'
910

1011
const variants = ['underlined', 'outlined', 'filled', 'solo', 'plain'] as const
@@ -82,6 +83,7 @@ describe('VAutocomplete', () => {
8283
))
8384

8485
await userEvent.click(container)
86+
await commands.waitStable('.v-list')
8587

8688
const menu = await screen.findByRole('listbox')
8789

@@ -128,6 +130,7 @@ describe('VAutocomplete', () => {
128130
))
129131

130132
await userEvent.click(container)
133+
await commands.waitStable('.v-list')
131134

132135
const menu = await screen.findByRole('listbox')
133136

@@ -179,6 +182,7 @@ describe('VAutocomplete', () => {
179182
))
180183

181184
await userEvent.click(container)
185+
await commands.waitStable('.v-list')
182186

183187
const menu = await screen.findByRole('listbox')
184188

@@ -304,6 +308,7 @@ describe('VAutocomplete', () => {
304308
))
305309

306310
await userEvent.click(element)
311+
await commands.waitStable('.v-list')
307312

308313
await userEvent.click(screen.getAllByRole('option')[0])
309314
expect(selectedItems.value).toBe(1)
@@ -372,6 +377,7 @@ describe('VAutocomplete', () => {
372377

373378
const menuIcon = screen.getByRole('button', { name: /open/i })
374379
await userEvent.click(menuIcon)
380+
await commands.waitStable('.v-list')
375381

376382
const listItems = screen.getAllByRole('option')
377383
expect(listItems).toHaveLength(2)
@@ -485,6 +491,7 @@ describe('VAutocomplete', () => {
485491
const getItems = () => screen.queryAllByRole('option')
486492

487493
await userEvent.click(element)
494+
await commands.waitStable('.v-list')
488495
await expect.poll(getItems).toHaveLength(6)
489496

490497
await userEvent.keyboard('Cal')
@@ -565,7 +572,7 @@ describe('VAutocomplete', () => {
565572
))
566573

567574
await userEvent.click(element)
568-
575+
await commands.waitStable('.v-list')
569576
const items = await screen.findAllByRole('option')
570577
expect(items).toHaveLength(2)
571578

‎packages/vuetify/src/components/VCombobox/VCombobox.tsx

Lines changed: 5 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -23,7 +23,6 @@ import { forwardRefs } from '@/composables/forwardRefs'
2323
import { transformItem, useItems } from '@/composables/list-items'
2424
import { useLocale } from '@/composables/locale'
2525
import { useProxiedModel } from '@/composables/proxiedModel'
26-
import { makeTransitionProps } from '@/composables/transition'
2726

2827
// Utilities
2928
import { computed, mergeProps, nextTick, ref, shallowRef, watch } from 'vue'
@@ -91,7 +90,6 @@ export const makeVComboboxProps = propsFactory({
9190
modelValue: null,
9291
role: 'combobox',
9392
}), ['validationValue', 'dirty', 'appendInnerIcon']),
94-
...makeTransitionProps({ transition: false }),
9593
}, 'VCombobox')
9694

9795
type ItemType<T> = T extends readonly (infer U)[] ? U : never
@@ -296,16 +294,11 @@ export const VCombobox = genericComponent<new <
296294
menu.value = false
297295
}
298296

299-
if (['Enter', 'Escape', 'Tab'].includes(e.key)) {
300-
if (
301-
highlightFirst.value &&
302-
['Enter', 'Tab'].includes(e.key) &&
303-
!model.value.some(({ value }) => value === displayItems.value[0].value)
304-
) {
305-
select(filteredItems.value[0])
306-
}
307-
308-
isPristine.value = true
297+
if (highlightFirst.value &&
298+
['Enter', 'Tab'].includes(e.key) &&
299+
!model.value.some(({ value }) => value === displayItems.value[0].value)
300+
) {
301+
select(filteredItems.value[0])
309302
}
310303

311304
if (e.key === 'ArrowDown' && highlightFirst.value) {
@@ -403,7 +396,6 @@ export const VCombobox = genericComponent<new <
403396
// watch for search watcher to trigger
404397
nextTick(() => {
405398
menu.value = false
406-
isPristine.value = true
407399
})
408400
}
409401
}
@@ -514,7 +506,6 @@ export const VCombobox = genericComponent<new <
514506
maxHeight={ 310 }
515507
openOnClick={ false }
516508
closeOnContentClick={ false }
517-
transition={ props.transition }
518509
onAfterEnter={ onAfterEnter }
519510
onAfterLeave={ onAfterLeave }
520511
{ ...props.menuProps }

‎packages/vuetify/src/components/VCombobox/__tests__/VCombobox.spec.browser.tsx

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,7 @@ import { VForm } from '@/components/VForm'
44

55
// Utilities
66
import { generate, render, screen, userEvent, waitAnimationFrame, waitIdle } from '@test'
7+
import { commands } from '@vitest/browser/context'
78
import { cloneVNode, ref } from 'vue'
89

910
const variants = ['underlined', 'outlined', 'filled', 'solo', 'plain'] as const
@@ -92,6 +93,7 @@ describe('VCombobox', () => {
9293
))
9394

9495
await userEvent.click(element)
96+
await commands.waitStable('.v-list')
9597
await userEvent.click((await screen.findAllByRole('option'))[0])
9698
expect(model.value).toStrictEqual(items[0])
9799
expect(search.value).toBe(items[0].title)
@@ -139,6 +141,7 @@ describe('VCombobox', () => {
139141
))
140142

141143
await userEvent.click(element)
144+
await commands.waitStable('.v-list')
142145
await userEvent.click(screen.getAllByRole('option')[0])
143146
expect(model.value).toStrictEqual([items[0]])
144147
expect(search.value).toBeUndefined()
@@ -360,6 +363,7 @@ describe('VCombobox', () => {
360363
))
361364

362365
await userEvent.click(element)
366+
await commands.waitStable('.v-list')
363367

364368
const options = await screen.findAllByRole('option', { selected: true })
365369
expect(options).toHaveLength(2)
@@ -467,6 +471,7 @@ describe('VCombobox', () => {
467471
))
468472

469473
await userEvent.click(element)
474+
await commands.waitStable('.v-list')
470475

471476
await userEvent.click(screen.getAllByRole('option')[0])
472477

@@ -538,6 +543,8 @@ describe('VCombobox', () => {
538543
expect(screen.queryAllByRole('listbox')).toHaveLength(0)
539544

540545
await userEvent.click(element)
546+
await commands.waitStable('.v-list')
547+
541548
expect(screen.queryAllByRole('listbox')).toHaveLength(1)
542549
await userEvent.keyboard('{Escape}')
543550
await expect.poll(() => screen.queryAllByRole('listbox')).toHaveLength(0)
@@ -557,6 +564,8 @@ describe('VCombobox', () => {
557564
))
558565

559566
await userEvent.click(element)
567+
await commands.waitStable('.v-list')
568+
560569
expect(screen.getAllByRole('option')).toHaveLength(6)
561570

562571
await userEvent.keyboard('Cal')
@@ -579,6 +588,8 @@ describe('VCombobox', () => {
579588
))
580589

581590
await userEvent.click(element)
591+
await commands.waitStable('.v-list')
592+
582593
expect(screen.getAllByRole('option')).toHaveLength(6)
583594

584595
await userEvent.keyboard('Cal')
@@ -601,6 +612,8 @@ describe('VCombobox', () => {
601612
))
602613

603614
await userEvent.click(element)
615+
await commands.waitStable('.v-list')
616+
604617
expect(screen.getAllByRole('option')).toHaveLength(6)
605618

606619
await userEvent.keyboard('Cal')
@@ -662,6 +675,7 @@ describe('VCombobox', () => {
662675
})
663676

664677
await userEvent.click(element)
678+
await commands.waitStable('.v-list')
665679
expect(await screen.findByRole('listbox')).toBeInTheDocument()
666680

667681
await userEvent.click(screen.getAllByRole('option')[0])
@@ -728,6 +742,7 @@ describe('VCombobox', () => {
728742
))
729743

730744
await userEvent.click(element)
745+
await commands.waitStable('.v-list')
731746
await userEvent.click(screen.getAllByRole('option')[0])
732747
expect(model.value).toStrictEqual({ title: 'Item 1', value: 'item1' })
733748

0 commit comments

Comments
 (0)