fix(VRipple): hide ripple on blur (#13264)

fixes #13189

Author: inottn

packages/vuetify/src/directives/ripple/__tests__/ripple.spec.ts

@@ -145,4 +145,18 @@ describe('ripple.ts', () => {
     jest.runAllTimers()
     expect(wrapper.findAll('.v-ripple__container')).toHaveLength(0)
   })
+
+  it('should hide ripple on blur if keyboardRipple is true', () => {
+    const wrapper = mountFunction()
+    const keydownEvent = new KeyboardEvent('keydown', { keyCode: 13 })
+    wrapper.element.dispatchEvent(keydownEvent)
+
+    expect(wrapper.find('.v-ripple__container').exists()).toBe(true)
+
+    const blurEvent = new FocusEvent('blur')
+    wrapper.element.dispatchEvent(blurEvent)
+
+    jest.runAllTimers()
+    expect(wrapper.find('.v-ripple__container').exists()).toBe(false)
+  })
 })

packages/vuetify/src/directives/ripple/index.ts

@@ -253,6 +253,13 @@ function keyboardRippleHide (e: KeyboardEvent) {
   rippleHide(e)
 }
 
+function focusRippleHide (e: FocusEvent) {
+  if (keyboardRipple === true) {
+    keyboardRipple = false
+    rippleHide(e)
+  }
+}
+
 function updateRipple (el: HTMLElement, binding: VNodeDirective, wasEnabled: boolean) {
   const enabled = isRippleEnabled(binding.value)
   if (!enabled) {
@@ -283,6 +290,8 @@ function updateRipple (el: HTMLElement, binding: VNodeDirective, wasEnabled: boo
     el.addEventListener('keydown', keyboardRippleShow)
     el.addEventListener('keyup', keyboardRippleHide)
 
+    el.addEventListener('blur', focusRippleHide)
+
     // Anchor tags can be dragged, causes other hides to fail - #1537
     el.addEventListener('dragstart', rippleHide, { passive: true })
   } else if (!enabled && wasEnabled) {
@@ -301,6 +310,7 @@ function removeListeners (el: HTMLElement) {
   el.removeEventListener('keydown', keyboardRippleShow)
   el.removeEventListener('keyup', keyboardRippleHide)
   el.removeEventListener('dragstart', rippleHide)
+  el.removeEventListener('blur', focusRippleHide)
 }
 
 function directive (el: HTMLElement, binding: VNodeDirective, node: VNode) {