Skip to content

Commit

Permalink
fix: interactive option for shadow dom (#913)
Browse files Browse the repository at this point in the history
When tippy content is inside a shadow dom, the `interactive` option is not working.

The reason is 
> Events that happen in shadow DOM have the host element as the target, when caught outside of the component.
the popper is inside the host, so `popper.contains(target)` will always return false.
see https://javascript.info/shadow-dom-events

by using `event.composedPath` instead of the `event.target`, it will get the actual target and fix this bug.

see https://stackoverflow.com/questions/39245488/event-path-is-undefined-running-in-firefox/39245638#39245638
  • Loading branch information
zhaoyao91 authored Mar 1, 2021
1 parent 3d7e03a commit 3fe61fc
Showing 1 changed file with 2 additions and 1 deletion.
3 changes: 2 additions & 1 deletion src/createTippy.ts
Original file line number Diff line number Diff line change
Expand Up @@ -301,9 +301,10 @@ export default function createTippy(
}

// Clicked on interactive popper
const actualTarget = (event.composedPath && event.composedPath()[0]) || event.target;
if (
instance.props.interactive &&
popper.contains(event.target as Element)
popper.contains(actualTarget as Element)
) {
return;
}
Expand Down

0 comments on commit 3fe61fc

Please sign in to comment.