ndelvalle / v-click-outside

🔲 Vue directive to react on clicks outside an element without stopping the event propagation
MIT License
967 stars 88 forks source link

ReportingObserver [deprecation]: 'Event.path' is deprecated and will be removed in M109, around January 2023. Please use 'Event.composedPath()' instead #533

Closed mrleblanc101 closed 2 years ago

mrleblanc101 commented 2 years ago

Hi, I get hundred of these warning in Sentry related to this plugin. Seem to come from line 54 of v-click-outsite.js:

function onEvent({ el, event, handler, middleware }) {
  // Note: composedPath is not supported on IE and Edge, more information here:
  //       https://developer.mozilla.org/en-US/docs/Web/API/Event/composedPath
  //       In the meanwhile, we are using el.contains for those browsers, not
  //       the ideal solution, but using IE or EDGE is not ideal either.
  const path = event.path || (event.composedPath && event.composedPath())
  const isClickOutside = path
    ? path.indexOf(el) < 0
    : !el.contains(event.target)

  if (!isClickOutside) {
    return
  }

  execHandler({ event, handler, middleware })
}

Instead of using Event.path, you should include a polyfill for IE11 and Edge (Edge-HTML, pre-Chromium) if necessary or drop support for those older browser.

mrleblanc101 commented 2 years ago

I found a couple polyfill in this stackoverflow thread: https://stackoverflow.com/questions/39245488/event-path-is-undefined-running-in-firefox https://gist.github.com/rockinghelvetica/00b9f7b5c97a16d3de75ba99192ff05c