BrightspaceUI / core

A collection of accessible, free, open-source web components for building Brightspace applications.
Apache License 2.0
64 stars 24 forks source link

Resize loop inside hierarchical view -> menu -> dropdown-tabs #1575

Open dlockhart opened 3 years ago

dlockhart commented 3 years ago

This was noticed in the facet-filter-sort repo, which has a dropdown with both a menu inside and dropdown-tabs.

This exception is thrown in Safari only:

ResizeObserver loop completed with undelivered notifications

Safari only added support for ResizeObserver in January 2020, which could explain why we weren't seeing this before.

The explanation for that error is this:

If any changes are incurred during the callback, then layout happens again, but here, the system finds the shallowest at which depth a change occurred (measured in simple node depth from the root). Any changes that are related to something deeper down in the tree are delivered at once, while any that are not are queued up and delivered in the next frame, and an error message will be sent to the Web Inspector console: (ResizeObserver loop completed with undelivered notifications).

Digging deeper:

I can't figure out why Safari is complaining and the other browsers aren't... everything seems to be happening in the same sequence.

svanherk commented 3 years ago

This started failing in filter at the 1.150.1 version of core: https://github.com/BrightspaceUI/core/compare/v1.150.0...v1.150.1

However, digging into this, this code is just adjusting the width that's used and doesn't actually cause any more resizes than what was happening before. From what I can tell, this code somehow changes the timing and that is what is making the test fail. Removing other unrelated tests in the same file will make the failing test pass.

It seems like Safari's ResizeObserver reporter code gets mad if we try to close the dropdown or end the test before it's done telling us things. From my testing, this update will fix the test: https://github.com/BrightspaceUILabs/facet-filter-sort/pull/85

But this issue may still be valid - it seems we run the resize code in dropdown three times with the same width.