useResizeObserver - not triggered on first render for older browsers

[tomekancu]

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.

react-spectrum/packages/@react-aria/utils/src/useResizeObserver.ts

Lines 21 to 26 in f6a664b

	if (!hasResizeObserver()) {
	window.addEventListener('resize', onResize, false);
	return () => {
	window.removeEventListener('resize', onResize, false);
	};
	} else {

🔦 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]

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

react-spectrum/packages/@react-spectrum/actiongroup/src/ActionGroup.tsx

Line 180 in f6a664b

useLayoutEffect(updateOverflow, [updateOverflow, state.collection]);

[tomekancu]

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