Closed abbeyhrt closed 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
Per the comment above, it looks like the event is still propagating. Reopening to investigate.
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.
This issue is blocking AVT for one of our Console UIs; can we have the fix expedited?
@edabe There is a workaround for this. Pass an onKeyDown
prop the Tooltip and use event.stopPropogation()
within the callback.
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.
@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
What package(s) are you using?
carbon-components
carbon-components-react
Detailed description
If
Tooltip
is a child of a component that has anonKeyDown
handler for 'Escape', escaping the Tooltip also calls the parent'sonKeyDown
. For example, when is aTooltip
in pal'sSidePanel
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.