search

adobe / react-spectrum

A collection of libraries and tools that help you build adaptive, accessible, and robust user experiences.
https://react-spectrum.adobe.com
Apache License 2.0
12.7k stars 1.09k forks source link

useResizeObserver - not triggered on first render for older browsers #6091

Open tomekancu opened 6 months ago

tomekancu commented 6 months ago

Provide a general summary of the issue here

If useResizeObserver is used on current browsers, onResize is fired on first use. For older browsers that don't support ResizeObserver, it is fired after the first resize of the browser window.

🤔 Expected Behavior?

onResize is triggered on first render

😯 Current Behavior

onResize is not triggered on first use as in supported browsers

💁 Possible Solution

We should call onResize in useEffect for an unsupported browser condition. https://github.com/adobe/react-spectrum/blob/f6a664ba900c3e6307a0f9461241aa3b2397efeb/packages/%40react-aria/utils/src/useResizeObserver.ts#L21-L26

🔦 Context

The original ResizeObserver is called on the observe method. For the mock implementation with the resize event, we do not have this behaviour. The first onResize must be called manually.

🖥️ Steps to Reproduce

Codesandbox with "simulated" old browser by setting window.ResizeObserver = undefined https://codesandbox.io/p/sandbox/useresizeobserver-not-triggered-on-init-hx3mkm or use the hook in older browsers like Firefox 68.0

Version

1.1.1

What browsers are you seeing the problem on?

Firefox

If other, please specify.

No response

What operating system are you using?

Mac

🧢 Your Company/Team

No response

🕷 Tracking Issue

No response

snowystinger commented 6 months ago

We don't really support browsers that old, FF 68 was July 2019. Some of this code is from a time when we supported those older ones, but I don't think that is reason enough to add more support. Is there a current one (less than ~3 years old) which is displaying the problem?

You can work around it the same way we have in our components https://github.com/adobe/react-spectrum/blob/f6a664ba900c3e6307a0f9461241aa3b2397efeb/packages/%40react-spectrum/actiongroup/src/ActionGroup.tsx#L180

tomekancu commented 6 months ago
  1. Firefox is just an example. It's just easier to test it on the desktop. The same problem could occur on some a 4 year old mobile phone without updates, or even an "exocit" Android.
  2. If we do not support such old browsers, the condition should not exist in the first place. The implementation exists so it should be as close as possible to the real ResizeObserver.
  3. The existing work aournd is not implemented in every place of the library. For example in Select - I added it in the codesandbox. I think it is better to have it in one place rather than to copy and paste it everywhere.
  4. JSDOM doesn't support ResizeObserver - existing tests assume the different behaviour than real browsers
  5. It's easy to fix - just calling onResize after adding the listener