Multiselect closes the whole modal

[bogdaaamn]

Bug report

Required System information

• Node.js version: v18.17.1
• NPM version: 9.63
• Strapi version: 4.14.2
• Operating system: Sonoma 14.0
• Browser: Arc 1.10.1 (Chromium Engine Version 117.0.5938.132)
• Is your project Javascript or Typescript: TypeScript

Describe the bug

When selecting options inside a multiselect that is inside a modal, clicking outside of the multi box closes the modal altogether. No matter if I click inside of the modal to fill in other fields, this will close the modal.

I also didn't figure out other ways to close the options list without closing the modal. Focusing back to the modal feels impossible.

Steps to reproduce the behavior

The place I found a modal is on the Users settings page, not sure where else are they.

1. Go to Settings > Users
2. Click on Invite new user
3. Select options in User's roles
4. Exit the options list

Expected behavior

A click outside of the options list, inside the modal should close just the list. Esc key press as well, I believe (?)

Screenshots

Code snippets

n/a

Additional context

n/a

[shoaib-31]

@derrickmehaffy @bogdaaamn Can I work on this issue? Maybe I can help as I have faced similar issues recently in my projects.

[Boegie19]

@shoaib-31 If you want to work on something you would be looking for status: confirmed issues. take any you want that don't have an open PR for it since if somone is working on it they should open a PR for it.

@bogdaaamn Can you try and rebuild your admin and update to 4.14.3 since I can't replicate it on 4.14.3

[github-actions]

This is a templated message

Hello @bogdaaamn,

Thank you for reporting this bug, however we are unable to reproduce the issue you described given the information we have on hand. Can you please create a fresh project that you are able to reproduce the issue in, provide clear steps to reproduce this issue, and either upload this fresh project to a new GitHub repo or compress it into a .zip and upload it on this issue?

We would greatly appreciate your assistance with this, by working in a fresh project it will cut out any possible variables that might be unrelated.
Please note that issues labeled with status: can not reproduce will be closed in 14 days if there is no activity.

Thank you!

[hamzapaskingakhtar1999]

@derrickmehaffy @bogdaaamn Can I work on this issue? Maybe I can help as I have faced similar issues recently in my projects.

I tried to reproduce and it seems to be working fine. Have you tried reproducing the issue yourself ?

[jainsuneet]

I am also facing the same issue after updating to version 4.14.3

[bogdaaamn]

Thank you @Boegie19! It's still happening on 4.14.3.

I just ran yarn create strapi-app my-project --quickstart and I can't reproduce it on a fresh codebase. I will trace back on my codebase see what the problem could be 🤔

[Boegie19]

@bogdaaamn Do you get any errors in your console?

someone in discord is having the same issue see https://discord.com/channels/811989166782021633/1159495587113205810/1159495587113205810

[afroraydude]

I attempted this and found no errors in the console. I updated to 4.14.3 and rebuilt and still no errors in console but the issue persists.

[joshuaellis]

Hi everyone, sorry to hear you're having some difficulties. With the help of @Boegie19, we're struggling to reproduce this issue and most of you are with a fresh project.

Overall my advice would be to delete your node_modules and lockfile as per the usual upgrade paths – which should make sure the design-system is up to date. Failing this, this issue will remain as "can not reproduce" unless someone is able to provide a github repo demonstrating the issue 👍🏼

[bogdaaamn]

Thank you @joshuaellis @Boegie19!

Deleting and re-generating the lock file fixed the issue indeed. I thought it's weird to do it since I changed the lock file with the upgrade from 4.14.2 to 4.14.3 and issues persisted, so I didn't think this would do much. But it did wonders, thank you 🙌🏼

@afroraydude @jainsuneet does this help?

[Boegie19]

@bogdaaamn can you send us a diff of the old and new lock file of posible?

[bogdaaamn]

@Boegie19 sure! The PR is in a private repo, but here is the git diff https://gist.github.com/bogdaaamn/2396679bf5bddde6ce4eab023259593a

Note that we also have a bunch of custom plugins, most of this might just be noise

[Boegie19]

found the underlying issue. it is most likely radix-ui/primitives#1088