search

carbon-design-system / carbon

A design system built by IBM
https://www.carbondesignsystem.com
Apache License 2.0
7.84k stars 1.81k forks source link

[Tooltip]: escape on button in tooltip propagates #8502

Closed abbeyhrt closed 3 years ago

abbeyhrt commented 3 years ago

What package(s) are you using?

Detailed description

If Tooltip is a child of a component that has an onKeyDown handler for 'Escape', escaping the Tooltip also calls the parent's onKeyDown. For example, when is a Tooltip in pal's SidePanel component, escaping the tooltip unexpectedly closes the panel.

Steps to reproduce the issue

You can see an example of this behavior here: https://codesandbox.io/s/frosty-fog-xuj18?file=/src/index.js where onKeyDown is called when you try to close the tooltip with escape.

lji00 commented 3 years ago

With latest carbon version, the issue still exists in above sandbox example. https://codesandbox.io/s/frosty-fog-xuj18?file=/src/index.js

abbeyhrt commented 3 years ago

Per the comment above, it looks like the event is still propagating. Reopening to investigate.

tay1orjones commented 3 years ago

I believe this is because Tooltip adds a native event listener, rather than using the synthetic event from React. So we stop propogation on the native event handler, but react still calls the synthetic event as shown in the codesandbox.

To test, in storybook I opened the devtools and added a keydown event handler to the div that wraps the Tooltip. The callback wasn’t called when I hit escape to close the tooltip.

edabe commented 3 years ago

This issue is blocking AVT for one of our Console UIs; can we have the fix expedited?

tay1orjones commented 3 years ago

@edabe There is a workaround for this. Pass an onKeyDown prop the Tooltip and use event.stopPropogation() within the callback.

lji00 commented 2 years ago

This specific issue has been fixed(Escape close the modal), but there is still an a11y issue with this fix as described in https://github.com/carbon-design-system/carbon/issues/9866 When I tab to a tooltip on a modal and that tooltip contains an interactive element e.g. a link or a button, there is no way to tab out of the tooltip.

tay1orjones commented 2 years ago

@lji00 This should be fixed via #10220, just published in v10.49.1.

Here's two identical sandboxes demonstrating the fix with tooltip esc working as intended with both React v16 and React v17:

React 16: https://codesandbox.io/s/carbon-tooltip-escape-delegation-react16-l1ih9 React 17: https://codesandbox.io/s/carbon-tooltip-escape-delegation-react17-pydv4