fix(click-outside): listen for events on document instead of body

fixes #14040
vuetifyjs · Aug 11, 2021 · 0635cd3 · 0635cd3
1 parent e8500ab
commit 0635cd3
Show file tree

Hide file tree

Showing 3 changed files with 9 additions and 9 deletions.
diff --git a/packages/vuetify/src/directives/click-outside/__tests__/click-outside-shadow-dom.spec.ts b/packages/vuetify/src/directives/click-outside/__tests__/click-outside-shadow-dom.spec.ts
@@ -24,7 +24,7 @@ function bootstrap (args?: object) {
   document.body.appendChild(shadowHost)
   shadowRoot.appendChild(shadowEl)
 
-  jest.spyOn(window.document.body, 'addEventListener').mockImplementation((eventName, eventHandler, options) => {
+  jest.spyOn(window.document, 'addEventListener').mockImplementation((eventName, eventHandler, options) => {
     if (eventName === 'click') outsideClickHandler = eventHandler
     if (eventName === 'mousedown') outsideMousedownHandler = eventHandler
   })
@@ -34,7 +34,7 @@ function bootstrap (args?: object) {
     if (eventName === 'mousedown') shadowMousedownHandler = eventHandler
   })
 
-  jest.spyOn(window.document.body, 'removeEventListener')
+  jest.spyOn(window.document, 'removeEventListener')
   jest.spyOn(shadowRoot, 'removeEventListener')
 
   ClickOutside.inserted(shadowEl as HTMLElement, binding as any)
@@ -54,10 +54,10 @@ function bootstrap (args?: object) {
 describe('click-outside.js within the Shadow DOM', () => {
   it('should register and unregister handler outside of the shadow DOM', () => {
     const { outsideClickHandler, shadowEl } = bootstrap()
-    expect(window.document.body.addEventListener).toHaveBeenCalledWith('click', outsideClickHandler, true)
+    expect(window.document.addEventListener).toHaveBeenCalledWith('click', outsideClickHandler, true)
 
     ClickOutside.unbind(shadowEl)
-    expect(window.document.body.removeEventListener).toHaveBeenCalledWith('click', outsideClickHandler, true)
+    expect(window.document.removeEventListener).toHaveBeenCalledWith('click', outsideClickHandler, true)
   })
 
   it('should register and unregister handler within the shadow DOM', () => {

diff --git a/packages/vuetify/src/directives/click-outside/__tests__/click-outside.spec.ts b/packages/vuetify/src/directives/click-outside/__tests__/click-outside.spec.ts
@@ -14,11 +14,11 @@ function bootstrap (args?: object) {
 
   let clickHandler
   let mousedownHandler
-  jest.spyOn(window.document.body, 'addEventListener').mockImplementation((eventName, eventHandler, options) => {
+  jest.spyOn(window.document, 'addEventListener').mockImplementation((eventName, eventHandler, options) => {
     if (eventName === 'click') clickHandler = eventHandler
     if (eventName === 'mousedown') mousedownHandler = eventHandler
   })
-  jest.spyOn(window.document.body, 'removeEventListener')
+  jest.spyOn(window.document, 'removeEventListener')
 
   ClickOutside.inserted(el as HTMLElement, binding as any)
 
@@ -33,10 +33,10 @@ function bootstrap (args?: object) {
 describe('click-outside', () => {
   it('should register and unregister handler', () => {
     const { clickHandler, el } = bootstrap()
-    expect(window.document.body.addEventListener).toHaveBeenCalledWith('click', clickHandler, true)
+    expect(window.document.addEventListener).toHaveBeenCalledWith('click', clickHandler, true)
 
     ClickOutside.unbind(el)
-    expect(window.document.body.removeEventListener).toHaveBeenCalledWith('click', clickHandler, true)
+    expect(window.document.removeEventListener).toHaveBeenCalledWith('click', clickHandler, true)
   })
 
   it('should call the callback when closeConditional returns true', async () => {

diff --git a/packages/vuetify/src/directives/click-outside/index.ts b/packages/vuetify/src/directives/click-outside/index.ts
@@ -59,7 +59,7 @@ function directive (e: PointerEvent, el: HTMLElement, binding: ClickOutsideDirec
 function handleShadow (el: HTMLElement, callback: Function): void {
   const root = attachedRoot(el)
 
-  callback(document.body)
+  callback(document)
 
   if (root instanceof ShadowRoot) {
     callback(root)