Skip to content

Commit

Permalink
fix: Allow click events to pass through tooltip wrapped elements
Browse files Browse the repository at this point in the history
  • Loading branch information
Brandon Dow committed May 15, 2024
1 parent d46fd2f commit ece1d31
Showing 1 changed file with 2 additions and 1 deletion.
3 changes: 2 additions & 1 deletion src/components/Tooltip.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -36,7 +36,8 @@ export function Tooltip(props: TooltipProps) {
{...(!state.isOpen && typeof title === "string" ? { title } : {})}
{...tid}
// Add display contents to prevent the tooltip wrapping element from short-circuiting inherited styles (i.e. flex item positioning)
css={Css.display("contents").$}
// Once the element is `:active`, allow pointer events (i.e. click events) to pass through to the children.
css={Css.display("contents").addIn(":active", Css.add("pointerEvents", "none").$).$}
// Adding `draggable` as a hack to allow focus to continue through this element and into its children.
// This is due to some code in React-Aria that prevents default due ot mobile browser inconsistencies,
// and the only way they don't prevent default is if the element is draggable.
Expand Down

0 comments on commit ece1d31

Please sign in to comment.