Combobox inside a ModalLayout results in a frustrated user

[M15sy]

Bug report

Describe the bug

TLDR; When selecting a ComboboxOption within a ModalLayout, the DismissibleLayer pointerdown event is triggered because the ComboboxOption is within a different portal to the modal’s portal so !layerRef.current.contains(event.target) evaluates to true. This results in the modal closing, the Combobox onChange handler never being called and the user feeling frustrated as they believe the app to be broken.

Additional context

Hi Strapi team 👋,

I recently upgraded a Strapi app to v4.4.5 and tried to create a new component type from the Content-Type Builder UI. However, when I tried to select the new component’s category, the ‘Create a component’ modal closed and I was not able to create my new component (see attached screenshot below).

After a bit of debugging, I figured out what the cause of this behaviour was (see bug description above) and I now know if I use my keyboard to select the category I am able to continue and create my new component type.

I imagine the intention of the app is not to cause frustration so it would be great if this could be looked at. I did give it a little thought... and one possible solution could be to remove the pointerdown event from the DismissibleLayer and instead add an onClick handler to the ModalWrapper, but I’ll leave the choice up to you guys - though it would be great to validate the fix also works when selecting a ComboboxOption that overhangs the modal.

Thanks ✌️

Required System information

• Npm version: 8.11.0
• NodeJS version: 16.16.0
• Strapi Design System version: 1.2.6
• Browser: Chrome 106.0.5249.119

Steps to reproduce the behavior

1. Find a ModalLayout with a Combobox inside or use the code sandbox linked below.
2. Try to select a ComboboxOption using your mouse.
3. The modal closes and the Combobox value is never updated.

Expected behavior

Combobox onChange to be triggered and the modal to stay open.

Code snippets

https://codesandbox.io/embed/boring-chatterjee-gqhd7k?fontsize=14&hidenavigation=1&theme=dark

Screenshots

[joshuaellis]

Thanks for the report! I'm going to look at this now when I have an update I'll post here.

[dennislo]

Hi @joshuaellis

I'm also seeing this issue for the Add new component to the dynamic zone modal

[M15sy]

@joshuaellis thanks for the quick turn around, I've bumped my version and it all works swimmingly 🌟

[mdondavid]

I get a similar issue on configure view

[gu-stav]

@mdondavid We've released a new version of Strapi, which includes a fix for that: https://github.com/strapi/strapi/releases/tag/v4.4.7 Please make sure to rebuild the admin UI after the update. Does the issue still exist?

[mdondavid]

@gu-stav yes, I ugraded to latest version 4.4.7. Tried rebuilding the admin UI after the update. Also, re-installed the package after deleting the node_modules folder.

[gu-stav]

@joshuaellis Could you recheck this case? 🙏🏼

[joshuaellis]

Hi @mdondavid

I can't reproduce this right now. Can you please give a bit more information e.g. your browser & the version of strapi you're using (CE or EE). Also steps to reproduce this bug would be appreciated too.

[gu-stav]

Closing until we have more information.