-
-
Notifications
You must be signed in to change notification settings - Fork 2k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
[BUG] Dash Design Kit's ddk.Notification does not render correctly on React 18.2.0 #2517
Comments
Hi there!!! Your code uses the We recommend that you update your version of Dash and other related components to the latest available version. Please make sure that you have the latest versions of the Also, consider creating a React app as suggested by a colleague above. |
Resolving this will be a blocker for rolling out React 18 as the default version for Dash. |
Took an initial look -- I think the weird behavior is likely related to the fact that we are calling Happy to dig deeper but this is beyond my area of expertise -- wondering @HammadTheOne whether you have thoughts or would be willing to take a look? cc @ndrezn |
@emilykl leaving with you to follow up in a 1:1 with Hammad next week and see what changes are required. |
Describe your context
Please provide us your environment, so we can easily reproduce the issue.
pip list | grep dash
belowif frontend related, tell us your Browser, Version and OS
Describe the bug
ddk.Notification rendering is inconsistent. It does not render immediately until the next UI event. This is incredibly buggy on React 18.
Reproduction Steps on this Example:
Expected behavior
It renders immediately on each key press.
Screenshots
I've included a screencapture of this behavior comparing React 16 and React 18.
React 16: https://user-images.githubusercontent.com/1694040/235269740-57d35c94-530e-432f-b052-0b7bf7de4302.mov
React 18: https://user-images.githubusercontent.com/1694040/235269470-159ee33b-994a-4ba3-a5a2-ae42eff829a5.mov
The text was updated successfully, but these errors were encountered: