Cannot read properties of null (reading 'shadowRoot')

[pzaczkiewicz-athenahealth]

Provide a general summary of the issue here

When I open a Popover within a shadow DOM I get an error:

Cannot read properties of null (reading 'shadowRoot')
TypeError: Cannot read properties of null (reading 'shadowRoot')

🤔 Expected Behavior?

Popover opens

😯 Current Behavior

Errors:

Cannot read properties of null (reading 'shadowRoot')
TypeError: Cannot read properties of null (reading 'shadowRoot')

💁 Possible Solution

@react-aria/utils@3.33.0 on npm appears to behind the main branch.

🔦 Context

No response

🖥️ Steps to Reproduce

Since the issue appears to be a stale version of @react-aria/utils 3.33.0 on npm, a reproduction environment seems overkill.

Version

"@internationalized/date": "~3.11.0",     "@react-aria/separator": "~3.4.15",     "@react-aria/utils": "~3.33.0",     "@react-stately/datepicker": "~3.16.0",     "@react-stately/form": "~3.2.3",     "@react-stately/select": "~3.9.1",     "@react-types/shared": "~3.33.0",      "react-aria": "~3.46.0",     "react-aria-components": "~1.15.1",      "react-stately": "~3.44.0",

What browsers are you seeing the problem on?

Chrome

If other, please specify.

No response

What operating system are you using?

Windows

🧢 Your Company/Team

No response

🕷 Tracking Issue

No response

[snowystinger]

I cannot reproduce on the latest release https://stackblitz.com/edit/3etxhahd?file=src%2FExample.tsx

If it's a different setup than I've come up with you can also test this with a nightly version, which would be up to date with main.

We are in the process of a lot of updates to improve ShadowDOM support https://github.com/adobe/react-spectrum/pulls?q=is%3Apr+shadow+is%3Aclosed
#7687

If it's fixed on main, please close this issue out and it'll be in our next release. Otherwise, please provide an updated stackblitz. Thank you!

[pzaczkiewicz-athenahealth]

Ah, my bad. I was aware of your pending shadow DOM fixes, and was trying to use them. Took me a little while to figure out how to grab the nightlies. It works when I use the nightlies. I am getting a new error about ResizeObserver loop completed with undelivered notifications, but I think that's my fault.

[snowystinger]

No worries, we do have a resize observer issue open, though we don't know how to fix it because it's correct. You could check if it's that one. It's a really pesky warning

[pzaczkiewicz-athenahealth]

I reverted #9576, and can confirm that the warning goes away. Do you need another reproduction environment? In my implementation I'm controlling the isOpen prop of Select to implement a custom date range for a DateRangeSelect component. I prevent closing when a custom option is selected. I then add a new <div> to the popover to allow the user to select a custom date range that wasn't in the predefined list.

I had to dig into Select source code to figure out how to prevent onMouseUp from selecting an option when the onMouseDown originated within my custom date area, and I was also controlling isOpen. I do not get the warning when I select a standard option, but I do when I click on the custom option. The only thing I can think of is that useResizeObserver doesn't like it when I keep the Popover open and expand it.

I can try to replicate in a stackblitz if you need it, but it would be tricky, as I'd need to strip out proprietary code.

[pzaczkiewicz-athenahealth]

My hint : this issue only arise when the position of the popover have to be replaced due to having not enough space.

I played around in my code some more. Can confirm that it does not happen when there is enough space for it to render below.

[snowystinger]

We don't need another reproduction unless there's an actual problem with the behaviour. The console warning is just because we resize an element once after the resize observer fires and before the next frame. The browser decides is overly cautious and thinks that an infinite loop may be about to occur. But it won't and this is the behaviour that we want.

If we wait for a frame then we get a paint in-between, which makes it look like the component flickers in the wrong position first.

We'd need some other way to solve this non-bug warning. Or you can just silence the warning.