fix(click-outside): don't trigger if mousedown inside target (#13244)

fixes #5886
fixes #9283

Author: KaelWD

packages/vuetify/src/directives/click-outside/__tests__/click-outside.spec.ts

@@ -3,7 +3,6 @@ import ClickOutside from '../'
 import { wait } from '../../../../test'
 
 function bootstrap (args?: object) {
-  let registeredHandler
   const el = document.createElement('div')
 
   const binding = {
@@ -13,8 +12,11 @@ function bootstrap (args?: object) {
     },
   }
 
+  let clickHandler
+  let mousedownHandler
   jest.spyOn(window.document.body, 'addEventListener').mockImplementation((eventName, eventHandler, options) => {
-    registeredHandler = eventHandler
+    if (eventName === 'click') clickHandler = eventHandler
+    if (eventName === 'mousedown') mousedownHandler = eventHandler
   })
   jest.spyOn(window.document.body, 'removeEventListener')
 
@@ -23,72 +25,84 @@ function bootstrap (args?: object) {
   return {
     callback: binding.value.handler,
     el: el as HTMLElement,
-    registeredHandler,
+    clickHandler,
+    mousedownHandler,
   }
 }
 
-describe('click-outside.js', () => {
+describe('click-outside', () => {
   it('should register and unregister handler', () => {
-    const { registeredHandler, el } = bootstrap()
-    expect(window.document.body.addEventListener).toHaveBeenCalledWith('click', registeredHandler, true)
+    const { clickHandler, el } = bootstrap()
+    expect(window.document.body.addEventListener).toHaveBeenCalledWith('click', clickHandler, true)
 
     ClickOutside.unbind(el)
-    expect(window.document.body.removeEventListener).toHaveBeenCalledWith('click', registeredHandler, true)
+    expect(window.document.body.removeEventListener).toHaveBeenCalledWith('click', clickHandler, true)
   })
 
   it('should call the callback when closeConditional returns true', async () => {
-    const { registeredHandler, callback } = bootstrap({ closeConditional: () => true })
+    const { clickHandler, callback } = bootstrap({ closeConditional: () => true })
     const event = { target: document.createElement('div') }
 
-    registeredHandler(event)
+    clickHandler(event)
     await wait()
     expect(callback).toHaveBeenCalledWith(event)
   })
 
   it('should not call the callback when closeConditional returns false', async () => {
-    const { registeredHandler, callback, el } = bootstrap({ closeConditional: () => false })
+    const { clickHandler, callback, el } = bootstrap({ closeConditional: () => false })
 
-    registeredHandler({ target: el })
+    clickHandler({ target: el })
     await wait()
     expect(callback).not.toHaveBeenCalled()
   })
 
   it('should not call the callback when closeConditional is not provided', async () => {
-    const { registeredHandler, callback, el } = bootstrap()
+    const { clickHandler, callback, el } = bootstrap()
 
-    registeredHandler({ target: el })
+    clickHandler({ target: el })
     await wait()
     expect(callback).not.toHaveBeenCalled()
   })
 
   it('should not call the callback when clicked in element', async () => {
-    const { registeredHandler, callback, el } = bootstrap({ closeConditional: () => true })
+    const { clickHandler, callback, el } = bootstrap({ closeConditional: () => true })
 
-    registeredHandler({ target: el })
+    clickHandler({ target: el })
     await wait()
     expect(callback).not.toHaveBeenCalledWith()
   })
 
   it('should not call the callback when clicked in elements', async () => {
-    const { registeredHandler, callback, el } = bootstrap({
+    const { clickHandler, callback, el } = bootstrap({
       closeConditional: () => true,
       include: () => [el],
     })
 
-    registeredHandler({ target: document.createElement('div') })
+    clickHandler({ target: document.createElement('div') })
     await wait()
     expect(callback).not.toHaveBeenCalledWith()
   })
 
   it('should not call the callback when event is not fired by user action', async () => {
-    const { registeredHandler, callback } = bootstrap({ closeConditional: () => true })
+    const { clickHandler, callback } = bootstrap({ closeConditional: () => true })
 
-    registeredHandler({ isTrusted: false })
+    clickHandler({ isTrusted: false })
     await wait()
     expect(callback).not.toHaveBeenCalledWith()
 
-    registeredHandler({ pointerType: false })
+    clickHandler({ pointerType: false })
     await wait()
     expect(callback).not.toHaveBeenCalledWith()
   })
+
+  it('should not call the callback when mousedown was on the element', async () => {
+    const { clickHandler, mousedownHandler, callback, el } = bootstrap({ closeConditional: () => true })
+    const mousedownEvent = { target: el }
+    const clickEvent = { target: document.createElement('div') }
+
+    mousedownHandler(mousedownEvent)
+    clickHandler(clickEvent)
+    await wait()
+    expect(callback).not.toHaveBeenCalledWith(clickEvent)
+  })
 })

packages/vuetify/src/directives/click-outside/index.ts

@@ -14,16 +14,12 @@ function defaultConditional () {
   return true
 }
 
-function directive (e: PointerEvent, el: HTMLElement, binding: ClickOutsideDirective): void {
-  const handler = typeof binding.value === 'function' ? binding.value : binding.value!.handler
-
-  const isActive = (typeof binding.value === 'object' && binding.value.closeConditional) || defaultConditional
-
+function checkEvent (e: PointerEvent, el: HTMLElement, binding: ClickOutsideDirective): boolean {
   // The include element callbacks below can be expensive
   // so we should avoid calling them when we're not active.
   // Explicitly check for false to allow fallback compatibility
   // with non-toggleable components
-  if (!e || isActive(e) === false) return
+  if (!e || checkIsActive(e, binding) === false) return false
 
   // Check if additional elements were passed to be included in check
   // (click must be outside all included elements, if any)
@@ -36,8 +32,20 @@ function directive (e: PointerEvent, el: HTMLElement, binding: ClickOutsideDirec
   // Toggleable can return true if it wants to deactivate.
   // Note that, because we're in the capture phase, this callback will occur before
   // the bubbling click event on any outside elements.
-  !elements.some(el => el.contains(e.target as Node)) && setTimeout(() => {
-    isActive(e) && handler && handler(e)
+  return !elements.some(el => el.contains(e.target as Node))
+}
+
+function checkIsActive (e: PointerEvent, binding: ClickOutsideDirective): boolean | void {
+  const isActive = (typeof binding.value === 'object' && binding.value.closeConditional) || defaultConditional
+
+  return isActive(e)
+}
+
+function directive (e: PointerEvent, el: HTMLElement, binding: ClickOutsideDirective) {
+  const handler = typeof binding.value === 'function' ? binding.value : binding.value!.handler
+
+  el._clickOutside!.lastMousedownWasOutside && checkEvent(e, el, binding) && setTimeout(() => {
+    checkIsActive(e, binding) && handler && handler(e)
   }, 0)
 }
 
@@ -49,21 +57,26 @@ export const ClickOutside = {
   // clicks on body
   inserted (el: HTMLElement, binding: ClickOutsideDirective) {
     const onClick = (e: Event) => directive(e as PointerEvent, el, binding)
-    // iOS does not recognize click events on document
-    // or body, this is the entire purpose of the v-app
-    // component and [data-app], stop removing this
-    const app = document.querySelector('[data-app]') ||
-      document.body // This is only for unit tests
-    app.addEventListener('click', onClick, true)
-    el._clickOutside = onClick
+    const onMousedown = (e: Event) => {
+      el._clickOutside!.lastMousedownWasOutside = checkEvent(e as PointerEvent, el, binding)
+    }
+
+    document.body.addEventListener('click', onClick, true)
+    document.body.addEventListener('mousedown', onMousedown, true)
+
+    el._clickOutside = {
+      lastMousedownWasOutside: true,
+      onClick,
+      onMousedown,
+    }
   },
 
   unbind (el: HTMLElement) {
     if (!el._clickOutside) return
 
-    const app = document.querySelector('[data-app]') ||
-      document.body // This is only for unit tests
-    app && app.removeEventListener('click', el._clickOutside, true)
+    document.body.removeEventListener('click', el._clickOutside.onClick, true)
+    document.body.removeEventListener('mousedown', el._clickOutside.onMousedown, true)
+
     delete el._clickOutside
   },
 }

packages/vuetify/src/globals.d.ts

@@ -29,7 +29,11 @@ declare global {
   }
 
   interface HTMLElement {
-    _clickOutside?: EventListenerOrEventListenerObject
+    _clickOutside?: {
+      lastMousedownWasOutside: boolean
+      onClick: EventListener
+      onMousedown: EventListener
+    }
     _onResize?: {
       callback: () => void
       options?: boolean | AddEventListenerOptions

packages/vuetify/src/styles/elements/_global.sass

@@ -16,3 +16,8 @@ html.overflow-y-hidden
   ::-ms-clear,
   ::-ms-reveal
     display: none
+
+// iOS Safari hack to allow click events on body
+@supports (-webkit-touch-callout: none)
+  body
+    cursor: pointer