Merge branch 'master' into next

Author: J-Sek

lerna.json

@@ -13,5 +13,5 @@
     }
   },
   "npmClient": "pnpm",
-  "version": "3.10.5"
+  "version": "3.10.7"
 }

packages/api-generator/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@vuetify/api-generator",
   "type": "module",
-  "version": "3.10.5",
+  "version": "3.10.7",
   "private": true,
   "description": "",
   "scripts": {

packages/docs/package.json

@@ -4,7 +4,7 @@
   "description": "A Vue.js project",
   "private": true,
   "author": "John Leider <john@vuetifyjs.com>",
-  "version": "3.10.5",
+  "version": "3.10.7",
   "repository": {
     "type": "git",
     "url": "git+https://github.com/vuetifyjs/vuetify.git",

packages/vuetify/package.json

@@ -1,7 +1,7 @@
 {
   "name": "vuetify",
   "description": "Vue Material Component Framework",
-  "version": "3.10.5",
+  "version": "3.10.7",
   "author": {
     "name": "John Leider",
     "email": "john@vuetifyjs.com"

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

@@ -535,6 +535,7 @@ export const VAutocomplete = genericComponent<new <
                                       modelValue={ isSelected }
                                       ripple={ false }
                                       tabindex="-1"
+                                      onClick={ (event: MouseEvent) => event.preventDefault() }
                                     />
                                   ) : undefined }
 

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

@@ -649,7 +649,7 @@ describe('VAutocomplete', () => {
     })
 
     await userEvent.click(element)
-    await expect(screen.findByRole('listbox')).resolves.toBeDisplayed()
+    await expect.poll(() => screen.findByRole('listbox')).toBeDisplayed()
 
     await userEvent.click(screen.getAllByRole('option')[0])
     await rerender({ items: ['Foo', 'Bar', 'test', 'test 2'] })

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

@@ -371,9 +371,9 @@ export const VCombobox = genericComponent<new <
     }
     function onAfterLeave () {
       if (isFocused.value) {
-        isPristine.value = true
         vTextFieldRef.value?.focus()
       }
+      isPristine.value = true
       _searchLock.value = null
     }
     /** @param set - null means toggle */
@@ -582,6 +582,7 @@ export const VCombobox = genericComponent<new <
                                       modelValue={ isSelected }
                                       ripple={ false }
                                       tabindex="-1"
+                                      onClick={ (event: MouseEvent) => event.preventDefault() }
                                     />
                                   ) : undefined }
 

packages/vuetify/src/components/VFileInput/VFileInput.tsx

@@ -295,10 +295,11 @@ export const VFileInput = genericComponent<VFileInputSlots>()({
                   ...slots,
                   default: ({
                     props: { class: fieldClass, ...slotProps },
+                    controlRef,
                   }) => (
                     <>
                       <input
-                        ref={ inputRef }
+                        ref={ val => inputRef.value = controlRef.value = val as HTMLInputElement }
                         type="file"
                         accept={ inputAccept }
                         readonly={ isReadonly.value }

packages/vuetify/src/components/VMenu/VMenu.tsx

@@ -109,6 +109,16 @@ export const VMenu = genericComponent<OverlaySlots>()({
     })
     onDeactivated(() => isActive.value = false)
 
+    let focusTrapSuppressed = false
+    let focusTrapSuppressionTimeout = -1
+
+    async function onPointerdown () {
+      focusTrapSuppressed = true
+      focusTrapSuppressionTimeout = window.setTimeout(() => {
+        focusTrapSuppressed = false
+      }, 100)
+    }
+
     async function onFocusIn (e: FocusEvent) {
       const before = e.relatedTarget as HTMLElement | null
       const after = e.target as HTMLElement | null
@@ -119,27 +129,38 @@ export const VMenu = genericComponent<OverlaySlots>()({
         isActive.value &&
         before !== after &&
         overlay.value?.contentEl &&
-        // We're the topmost menu
-        overlay.value?.globalTop &&
+        // We're the menu without open submenus or overlays
+        overlay.value?.localTop &&
         // It isn't the document or the menu body
         ![document, overlay.value.contentEl].includes(after!) &&
         // It isn't inside the menu body
         !overlay.value.contentEl.contains(after)
       ) {
-        const focusable = focusableChildren(overlay.value.contentEl)
-        focusable[0]?.focus()
+        if (focusTrapSuppressed) {
+          if (!props.openOnHover && !overlay.value.activatorEl?.contains(after)) {
+            isActive.value = false
+          }
+        } else {
+          const focusable = focusableChildren(overlay.value.contentEl)
+          focusable[0]?.focus()
+
+          document.removeEventListener('pointerdown', onPointerdown)
+        }
       }
     }
 
     watch(isActive, val => {
       if (val) {
         parent?.register()
         if (IN_BROWSER && !props.disableInitialFocus) {
+          document.addEventListener('pointerdown', onPointerdown)
           document.addEventListener('focusin', onFocusIn, { once: true })
         }
       } else {
         parent?.unregister()
         if (IN_BROWSER) {
+          clearTimeout(focusTrapSuppressionTimeout)
+          document.removeEventListener('pointerdown', onPointerdown)
           document.removeEventListener('focusin', onFocusIn)
         }
       }

packages/vuetify/src/components/VSelect/VSelect.tsx

@@ -496,6 +496,7 @@ export const VSelect = genericComponent<new <
                                         modelValue={ isSelected }
                                         ripple={ false }
                                         tabindex="-1"
+                                        onClick={ (event: MouseEvent) => event.preventDefault() }
                                       />
                                     ) : undefined }