Dialog + Select can freeze the app in Firefox

[alexandre-lim]

Hello,

In Firefox Version 101.0.1, the app can freeze using Dialog version 0.1.5 and Select components together. Maybe it's coming from how we use the two components together. 🤔 It works fine in Chrome.

I made a simple codesandbox to reproduce the bug in FF:

• Open web inspector
• Open modal and hover to choose an item in the Select item

The bug seems to disappear if we upgrade Dialog to 0.1.7, but by doing that, it breaks our tests (we're using React Testing Library) which use userEvent.click(buttonComponent) with this message:
unable to click element as it has or inherits pointer-events set to "none".

Is there something we can do in the Dialog component to resolve this issue in tests? There's an option to use skipPointerEventsCheck in user-event lib but if possible we want to avoid doing that because we'll have to do it manually in all our tests and upcoming tests.

Thanks for your help.

[andy-hook]

Hi @alexandre-lim, sounds like you’ve run into this issue and an upgrade is recommended.

In terms of the test failure, as a first step could you try and upgrade to the latest RC and let us know if the problem persists?

[alexandre-lim]

Hi @andy-hook, thanks for your answer, it is indeed the same bug as the issue you linked. Seems like we'll have no choice but to upgrade.

I tried the latest RC version, it solve the tests but it seems to have a regression from 0.1.7 because the bug reappears in Firefox. It can be reproduce in the codesanbox by changing the version to the latest RC. Is that also the case in your side? Thanks.

[andy-hook]

It is, though aligning both Dialog and Select to the latest RC resolves the issue for me:
https://codesandbox.io/s/select-dialog-recursive-error-fub2bd?file=/App.js

Can you confirm on your side?

[alexandre-lim]

I tested it and everything works fine in Firefox and tests are also fixed, thanks! Is it safe to upgrade to latest RC or would it be better to wait for the official release? I was going through the releases page and wondered what type of versioning do Radix use? Because patch version can also be a Major version with breaking changes.

I also saw another issue (in FF) but prior to using latest RC releases. You can reproduce in the codesanbox by choosing option 1 from the select and hover on the text Very basic modal, it will be on selection mode and highlight the text.

[andy-hook]

I'd say the latest RC is pretty stable at this point, we're very close to making these changes latest anyway so if you want to hold out for official it'll be available very soon.

wondered what type of versioning do Radix use

We've not been great with this historically due to need for iterative api changes in the earlier days, since the apis are now more stable we are moving to v1 imminently and proper semver from then on.

I also saw another issue (in FF) but prior to using latest RC releases. You can reproduce in the codesanbox by choosing option 1 from the select and hover on the text Very basic modal, it will be on selection mode and highlight the text.

If you have time would you mind checking this is still a problem and raising an issue if so? 🙏

[alexandre-lim]

Thank you for your time and help 🙏 I'll resolve the discussion and I'll check later for the selection mode problem in FF and raise an issue if it's still happening.