adobe
fix: resizing window causes 'ResizeObserver loop completed with undelivered notifications' error
Closes https://github.com/adobe/react-spectrum/issues/7718
The error shown is likely due to how DOM changes triggered by the resize observer cause further resize events in the same frame. We can mitigate this by waiting until the next frame to apply the updates. This one may need a decent amount of manual regression testing.
✅ Pull Request Checklist:
- [ ] Included link to corresponding React Spectrum GitHub Issue.
- [ ] Added/updated unit tests and storybook for this change (for new code or code which already has tests).
- [ ] Filled out test instructions.
- [ ] Updated documentation (if it already exists for this component).
- [ ] Looked at the Accessibility Practices for this feature - Aria Practices
📝 Test Instructions:
- Open the RAC -> Popover Example story in it's own tab
- Open the console and resize your window rapidly to cause the popover position to be updated
- Verify that there is no
ResizeObserver loop completed with undelivered notificationserror in the console
🧢 Your Project:
Build successful! 🎉
- View the storybook
- View the storybook-19
- View the storybook-17
- View the storybook-16
- View the S2 storybook
- View the documentation
I did this a long time ago https://github.com/adobe/react-spectrum/pull/2891
Which we had to revert due to https://github.com/adobe/react-spectrum/pull/4204
We'll have to check if the issue that caused us to revert it happens in this PR as well. There isn't a lot of info on what it was, might be good to go back and check some of our testing sheets if you can.
@snowystinger
Looked back and looks like tooltip positions were broken in chromatic, which led to https://github.com/adobe/react-spectrum/pull/4202#discussion_r1136624321, which we reverted because the original bug was reintroduced.
@snowystinger not seeing anything noteworthy: https://www.chromatic.com/build?appId=5f0dd5ad2b5fc10022a2e320&number=900
Build successful! 🎉
- View the storybook
- View the storybook-19
- View the storybook-17
- View the storybook-16
- View the S2 storybook
- View the documentation
@snowystinger not seeing anything noteworthy: https://www.chromatic.com/build?appId=5f0dd5ad2b5fc10022a2e320&number=900
https://www.chromatic.com/test?appId=5f0dd5ad2b5fc10022a2e320&id=67aa8fee55d156ca20f02823 this one is new, it's not a flaky test
That said, it looks like the chromatic snapshot has been wrong, it shouldn't have been stacked vertically all this time. Let's see if we can find out more about what has happened there
@snowystinger - How would we confirm that the chromatic snapshot is just wrong?
The name of the chromatic test is ButtonGroup: horizontal, but it was previously rendering it vertically, so it was definitely consistently wrong. I'm not sure when it changed, we can probably look back at previous snapshots and the commits they are associated with
@reidbarber - Are you able to rebase this again? I'd like to see if that hits the same issue with ButtonGroup: horizontal.
Build successful! 🎉
any updates on this, or known workarounds? we're starting to adopt react-aria-components internally and seeing this intermittently on things like the Menu component
