search

carbon-design-system / carbon

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

[Bug]: Closing ActionableNotification with closeOnEscape throws an error when typing #16153

Open FFahrenheit opened 5 months ago

FFahrenheit commented 5 months ago

Package

@carbon/react

Browser

Firefox

Package version

v1.47.0

React version

v18.2.0

Description

Closing an ActionableNotification with closeOnEscape property with scape button closes the notification, but then every keystroke an error is thrown, and in dev environment crashes the app

Dev environment:

image

Stackblitz:

image

Deployed application:

image

Reproduction/example

https://stackblitz.com/edit/github-3sw6vk?file=src%2FApp.jsx

Steps to reproduce

  1. Add an ActionableNotification with closeOnEscape property
  2. Make sure the Notification is focused, so you can close the notification with the scape key (I reload in case I focus another component)
  3. Press esc key to close the notification
  4. Press any key and check the error logs

Suggested Severity

None

Application/PAL

No response

Code of Conduct

tay1orjones commented 5 months ago

My guess here is that the keydown event listener calling handleKeyDown isn't being cleaned up properly for some reason.

We can't just add more guards here https://github.com/carbon-design-system/carbon/blob/2e4d9fac95fd4d421042ce669004325c8b36c2a0/packages/react/src/components/Notification/Notification.tsx#L57

Whoever works on this needs to identify why handleKeyDown is being called, determine if it should be being called, and if not, how to prevent it from being called.