fix(VAutocomplete/VCombobox): consistent open/close transition

vuetifyjs · Dec 8, 2024 · 15ffb05 · 15ffb05
1 parent ca85fc0
commit 15ffb05
Show file tree

Hide file tree

Showing 4 changed files with 11 additions and 10 deletions.
diff --git a/packages/vuetify/src/components/VAutocomplete/VAutocomplete.tsx b/packages/vuetify/src/components/VAutocomplete/VAutocomplete.tsx
@@ -22,7 +22,6 @@ import { forwardRefs } from '@/composables/forwardRefs'
 import { useItems } from '@/composables/list-items'
 import { useLocale } from '@/composables/locale'
 import { useProxiedModel } from '@/composables/proxiedModel'
-import { makeTransitionProps } from '@/composables/transition'
 
 // Utilities
 import { computed, mergeProps, nextTick, ref, shallowRef, watch } from 'vue'
@@ -87,7 +86,6 @@ export const makeVAutocompleteProps = propsFactory({
     modelValue: null,
     role: 'combobox',
   }), ['validationValue', 'dirty', 'appendInnerIcon']),
-  ...makeTransitionProps({ transition: false }),
 }, 'VAutocomplete')
 
 type ItemType<T> = T extends readonly (infer U)[] ? U : never
@@ -368,7 +366,6 @@ export const VAutocomplete = genericComponent<new <
         // watch for search watcher to trigger
         nextTick(() => {
           menu.value = false
-          isPristine.value = true
         })
       }
     }
@@ -470,7 +467,6 @@ export const VAutocomplete = genericComponent<new <
                   maxHeight={ 310 }
                   openOnClick={ false }
                   closeOnContentClick={ false }
-                  transition={ props.transition }
                   onAfterEnter={ onAfterEnter }
                   onAfterLeave={ onAfterLeave }
                   { ...props.menuProps }

diff --git a/packages/vuetify/src/components/VAutocomplete/__tests__/VAutocomplete.spec.browser.tsx b/packages/vuetify/src/components/VAutocomplete/__tests__/VAutocomplete.spec.browser.tsx
@@ -5,6 +5,7 @@ import { VForm } from '@/components/VForm'
 // Utilities
 import { generate, render, screen, userEvent, waitAnimationFrame, waitIdle } from '@test'
 import { findAllByRole, queryAllByRole, within } from '@testing-library/vue'
+import { commands } from '@vitest/browser/context'
 import { cloneVNode, ref } from 'vue'
 
 const variants = ['underlined', 'outlined', 'filled', 'solo', 'plain'] as const
@@ -82,6 +83,7 @@ describe('VAutocomplete', () => {
     ))
 
     await userEvent.click(container)
+    await commands.waitStable('.v-list')
 
     const menu = await screen.findByRole('listbox')
 
@@ -128,6 +130,7 @@ describe('VAutocomplete', () => {
     ))
 
     await userEvent.click(container)
+    await commands.waitStable('.v-list')
 
     const menu = await screen.findByRole('listbox')
 
@@ -179,6 +182,7 @@ describe('VAutocomplete', () => {
     ))
 
     await userEvent.click(container)
+    await commands.waitStable('.v-list')
 
     const menu = await screen.findByRole('listbox')
 
@@ -304,6 +308,7 @@ describe('VAutocomplete', () => {
     ))
 
     await userEvent.click(element)
+    await commands.waitStable('.v-list')
 
     await userEvent.click(screen.getAllByRole('option')[0])
     expect(selectedItems.value).toBe(1)

diff --git a/packages/vuetify/src/components/VCombobox/VCombobox.tsx b/packages/vuetify/src/components/VCombobox/VCombobox.tsx
@@ -23,7 +23,6 @@ import { forwardRefs } from '@/composables/forwardRefs'
 import { transformItem, useItems } from '@/composables/list-items'
 import { useLocale } from '@/composables/locale'
 import { useProxiedModel } from '@/composables/proxiedModel'
-import { makeTransitionProps } from '@/composables/transition'
 
 // Utilities
 import { computed, mergeProps, nextTick, ref, shallowRef, watch } from 'vue'
@@ -91,7 +90,6 @@ export const makeVComboboxProps = propsFactory({
     modelValue: null,
     role: 'combobox',
   }), ['validationValue', 'dirty', 'appendInnerIcon']),
-  ...makeTransitionProps({ transition: false }),
 }, 'VCombobox')
 
 type ItemType<T> = T extends readonly (infer U)[] ? U : never
@@ -304,8 +302,6 @@ export const VCombobox = genericComponent<new <
         ) {
           select(filteredItems.value[0])
         }
-
-        isPristine.value = true
       }
 
       if (e.key === 'ArrowDown' && highlightFirst.value) {
@@ -403,7 +399,6 @@ export const VCombobox = genericComponent<new <
         // watch for search watcher to trigger
         nextTick(() => {
           menu.value = false
-          isPristine.value = true
         })
       }
     }
@@ -514,7 +509,6 @@ export const VCombobox = genericComponent<new <
                   maxHeight={ 310 }
                   openOnClick={ false }
                   closeOnContentClick={ false }
-                  transition={ props.transition }
                   onAfterEnter={ onAfterEnter }
                   onAfterLeave={ onAfterLeave }
                   { ...props.menuProps }

diff --git a/packages/vuetify/src/components/VCombobox/__tests__/VCombobox.spec.browser.tsx b/packages/vuetify/src/components/VCombobox/__tests__/VCombobox.spec.browser.tsx
@@ -4,6 +4,7 @@ import { VForm } from '@/components/VForm'
 
 // Utilities
 import { generate, render, screen, userEvent, waitAnimationFrame, waitIdle } from '@test'
+import { commands } from '@vitest/browser/context'
 import { cloneVNode, ref } from 'vue'
 
 const variants = ['underlined', 'outlined', 'filled', 'solo', 'plain'] as const
@@ -92,6 +93,7 @@ describe('VCombobox', () => {
       ))
 
       await userEvent.click(element)
+      await commands.waitStable('.v-list')
       await userEvent.click((await screen.findAllByRole('option'))[0])
       expect(model.value).toStrictEqual(items[0])
       expect(search.value).toBe(items[0].title)
@@ -139,6 +141,7 @@ describe('VCombobox', () => {
       ))
 
       await userEvent.click(element)
+      await commands.waitStable('.v-list')
       await userEvent.click(screen.getAllByRole('option')[0])
       expect(model.value).toStrictEqual([items[0]])
       expect(search.value).toBeUndefined()
@@ -360,6 +363,7 @@ describe('VCombobox', () => {
       ))
 
       await userEvent.click(element)
+      await commands.waitStable('.v-list')
 
       const options = await screen.findAllByRole('option', { selected: true })
       expect(options).toHaveLength(2)
@@ -467,6 +471,7 @@ describe('VCombobox', () => {
     ))
 
     await userEvent.click(element)
+    await commands.waitStable('.v-list')
 
     await userEvent.click(screen.getAllByRole('option')[0])
 
@@ -728,6 +733,7 @@ describe('VCombobox', () => {
     ))
 
     await userEvent.click(element)
+    await commands.waitStable('.v-list')
     await userEvent.click(screen.getAllByRole('option')[0])
     expect(model.value).toStrictEqual({ title: 'Item 1', value: 'item1' })