fix(VOverlay): restore focus without preventing Enter keydown

packages/docs/src/examples/v-menu/prop-positioningmenu.vue

@@ -17,8 +17,8 @@
 
     <v-menu
       v-model="showMenu"
+      :activator="menuTarget"
       :offset="[-8,-12]"
-      :target="menuTarget"
       location="bottom end"
       scroll-strategy="close"
     >

packages/vuetify/src/components/VDialog/VDialog.tsx

@@ -13,7 +13,7 @@ import { useProxiedModel } from '@/composables/proxiedModel'
 import { useScopeId } from '@/composables/scopeId'
 
 // Utilities
-import { mergeProps, nextTick, ref, watch } from 'vue'
+import { mergeProps, ref } from 'vue'
 import { genericComponent, omit, propsFactory, useRender } from '@/util'
 
 // Types
@@ -65,13 +65,6 @@ export const VDialog = genericComponent<OverlaySlots>()({
       emit('afterLeave')
     }
 
-    watch(isActive, async val => {
-      if (!val) {
-        await nextTick()
-        overlay.value!.activatorEl?.focus({ preventScroll: true })
-      }
-    })
-
     useRender(() => {
       const overlayProps = VOverlay.filterProps(props)
       const activatorProps = mergeProps({

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

@@ -117,26 +117,17 @@ export const VMenu = genericComponent<OverlaySlots>()({
     function onKeydown (e: KeyboardEvent) {
       if (props.disabled) return
 
-      if (e.key === 'Tab' || (e.key === 'Enter' && !props.closeOnContentClick)) {
-        if (
-          e.key === 'Enter' &&
-          ((e.target instanceof HTMLTextAreaElement) ||
-          (e.target instanceof HTMLInputElement && !!e.target.closest('form')))
-        ) return
-        if (e.key === 'Enter') e.preventDefault()
-
+      if (e.key === 'Tab') {
         const nextElement = getNextElement(
           focusableChildren(overlay.value?.contentEl as Element, false),
           e.shiftKey ? 'prev' : 'next',
           (el: HTMLElement) => el.tabIndex >= 0
         )
         if (!nextElement && !props.retainFocus) {
           isActive.value = false
-          overlay.value?.activatorEl?.focus()
         }
       } else if (props.submenu && e.key === (isRtl.value ? 'ArrowRight' : 'ArrowLeft')) {
         isActive.value = false
-        overlay.value?.activatorEl?.focus()
       }
     }
 

packages/vuetify/src/components/VOverlay/VOverlay.tsx

@@ -30,13 +30,15 @@ import {
   mergeProps,
   onBeforeUnmount,
   ref,
+  shallowRef,
   Teleport,
   Transition,
   watch,
 } from 'vue'
 import {
   animate,
   convertToUnit,
+  focusableChildren,
   genericComponent,
   getCurrentInstance,
   getScrollParent,
@@ -155,13 +157,25 @@ export const VOverlay = genericComponent<OverlaySlots>()({
       return typeof props.scrim === 'string' ? props.scrim : null
     })
     const { globalTop, localTop, stackStyles } = useStack(isActive, () => props.zIndex, props._disableGlobalStack)
+
+    const reopenLock = shallowRef(false)
+    watch(reopenLock, v => v && setTimeout(() => reopenLock.value = false, 50))
+
+    const returnFocusToActivator = shallowRef(true)
+    watch(returnFocusToActivator, v => v && setTimeout(() => returnFocusToActivator.value = false, 50))
+
     const {
       activatorEl, activatorRef,
       target, targetEl, targetRef,
       activatorEvents,
       contentEvents,
       scrimEvents,
-    } = useActivator(props, { isActive, isTop: localTop, contentEl })
+    } = useActivator(props, {
+      isActive,
+      isTop: localTop,
+      contentEl,
+      reopenLock,
+    })
     const { teleportTarget } = useTeleport(() => {
       const target = props.attach || props.contained
       if (target) return target
@@ -174,7 +188,7 @@ export const VOverlay = genericComponent<OverlaySlots>()({
     const { scopeId } = useScopeId()
 
     watch(() => props.disabled, v => {
-      if (v) isActive.value = false
+      if (v) closeWithoutReturningFocus()
     })
 
     const { contentStyles, updateLocation } = useLocationStrategies(props, {
@@ -195,7 +209,7 @@ export const VOverlay = genericComponent<OverlaySlots>()({
     function onClickOutside (e: MouseEvent) {
       emit('click:outside', e)
 
-      if (!props.persistent) isActive.value = false
+      if (!props.persistent) closeWithoutReturningFocus()
       else animateClick()
     }
 
@@ -208,6 +222,38 @@ export const VOverlay = genericComponent<OverlaySlots>()({
 
     useFocusTrap(props, { isActive, localTop, contentEl, activatorEl })
 
+    function closeWithoutReturningFocus () {
+      returnFocusToActivator.value = false
+      isActive.value = false
+    }
+
+    function returnFocus () {
+      if (!activatorEl.value) return
+      const activatorParent = activatorEl.value?.parentElement as HTMLElement
+      if (!activatorParent) return
+
+      let target
+      const focusableInParent = focusableChildren(activatorParent)
+      if (focusableInParent.includes(activatorEl.value)) {
+        target = activatorEl.value
+      } else {
+        const focusableWithin = focusableChildren(activatorEl.value)
+        const firstInputWithin = focusableWithin.find(x => ['INPUT', 'TEXTAREA'].includes(x.tagName))
+        target = firstInputWithin ?? focusableWithin[0]
+      }
+
+      target?.focus({ preventScroll: true })
+    }
+
+    watch(isActive, val => {
+      if (!val) {
+        reopenLock.value = true
+        if (returnFocusToActivator.value) {
+          returnFocus()
+        }
+      }
+    }, { flush: 'pre' })
+
     IN_BROWSER && watch(isActive, val => {
       if (val) {
         window.addEventListener('keydown', onKeydown)
@@ -227,12 +273,8 @@ export const VOverlay = genericComponent<OverlaySlots>()({
         if (!contentEl.value?.contains(document.activeElement)) {
           emit('keydown', e)
         }
-        if (!props.persistent) {
-          isActive.value = false
-          if (contentEl.value?.contains(document.activeElement)) {
-            activatorEl.value?.focus()
-          }
-        } else animateClick()
+        if (!props.persistent) isActive.value = false
+        else animateClick()
       }
     }
     function onKeydownSelf (e: KeyboardEvent) {
@@ -246,7 +288,7 @@ export const VOverlay = genericComponent<OverlaySlots>()({
       useBackButton(router, next => {
         if (globalTop.value && isActive.value) {
           next(false)
-          if (!props.persistent) isActive.value = false
+          if (!props.persistent) closeWithoutReturningFocus()
           else animateClick()
         } else {
           next()
@@ -375,6 +417,7 @@ export const VOverlay = genericComponent<OverlaySlots>()({
       globalTop,
       localTop,
       updateLocation,
+      closeWithoutReturningFocus,
     }
   },
 })

packages/vuetify/src/components/VOverlay/useActivator.tsx

@@ -73,9 +73,15 @@ export const makeActivatorProps = propsFactory({
 
 export function useActivator (
   props: ActivatorProps,
-  { isActive, isTop, contentEl }: {
+  {
+    isActive,
+    isTop,
+    reopenLock,
+    contentEl,
+  }: {
     isActive: Ref<boolean>
     isTop: Ref<boolean>
+    reopenLock: Ref<boolean>
     contentEl: Ref<HTMLElement | undefined>
   }
 ) {
@@ -122,7 +128,8 @@ export function useActivator (
       isHovered = false
       runCloseDelay()
     },
-    onFocus: (e: FocusEvent) => {
+    onFocusin: (e: FocusEvent) => {
+      if (reopenLock.value) return
       if (matchesSelector(e.target as HTMLElement, ':focus-visible') === false) return
 
       isFocused = true
@@ -150,7 +157,7 @@ export function useActivator (
       events.onMouseleave = availableEvents.onMouseleave
     }
     if (openOnFocus.value) {
-      events.onFocus = availableEvents.onFocus
+      events.onFocusin = availableEvents.onFocusin
       events.onBlur = availableEvents.onBlur
     }