Multiselect closes the whole modal

bogdaaamn commented 11 months ago

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.

Go to Settings > Users
Click on Invite new user
Select options in User's roles
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

Screen grab where the modal closes on any click outside of the multiselect

Code snippets

n/a

Additional context

n/a

shoaib-31 commented 11 months ago

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

Boegie19 commented 11 months ago

@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[bot] commented 11 months ago

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 commented 11 months ago

@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 commented 11 months ago

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

bogdaaamn commented 11 months ago

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 commented 11 months ago

@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 commented 11 months ago

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 commented 11 months ago

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 commented 11 months ago

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 commented 11 months ago

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

bogdaaamn commented 11 months ago

@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 commented 11 months ago

found the underlying issue. it is most likely https://github.com/radix-ui/primitives/issues/1088

jainsuneet commented 11 months ago

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?

@bogdaaamn Deleting the lock file and regenerating it did not help. Issue is still there.

Boegie19 commented 11 months ago

@jainsuneet can you send me your yarn lock file so I can confirm the issue?

wgnahs commented 11 months ago

I encountered the same issue on v4.14.3. I removed my lock file and then ran yarn build, which resolved the problem.

lukesmmr commented 11 months ago

Also happening to us after upgrading to v4.12.5 to v4.14.3 on one of our staging instances. Removing lock file and running yarn build was not the solution. Any updates on this?

Boegie19 commented 11 months ago

@lukesmmr issue is a miss meched dependency https://github.com/radix-ui/primitives/issues/1088 only solution would be to pin it properly pin it in your repo

JustTB commented 11 months ago

This issue can be closed. It was fixed with v4.14.4

Boegie19 commented 11 months ago

@JustTB Don't think it is fixed since it depends on what dependency versions npm choses.

nick-aj commented 10 months ago

Raising severity due to EE customer effected (5223). Severity raised:

Medium -> High.

nick-aj commented 10 months ago

Additional instance at TID: 5315.

Boegie19 commented 10 months ago

@nick-aj Issue is fixable btw by pinning spesific dependencys like said in https://github.com/radix-ui/primitives/issues/1088 this can atleast be used as a workaround to make everyting work again

nick-aj commented 9 months ago

Additional instance at TID 5374.

Thank you @Boegie19, I appreciate the pointer!

Eventyret commented 9 months ago

Additional instance at TID 5548

sdgroot commented 9 months ago

Any update on this issue? Also an Enterprise user here, and this bug is currently preventing us from inviting new users. Is there any known workaround until this is fixed?

Node.js version: v18.19.0 NPM version: v9.8.1 Strapi version: v4.15.5 Operating system: OSX Sonoma 14.2.1 (23C71) Browser: Firefox 120.0.1 and Chrome 120.0.6099.109 Is your project Javascript or Typescript: JavaScript

Boegie19 commented 8 months ago

@sdgroot Like I said above.

Pinning

"@radix-ui/react-dismissable-layer": "^1.0.5",
"@radix-ui/react-dialog": "^1.0.5"

fixes the issue since it is a miss match in version one is above 1.0.5 and the other is bellow it

derrickmehaffy commented 8 months ago

Locking this for now.

derrickmehaffy commented 8 months ago

Raising this to critical as it's beginning to heavily impact many of our Cloud users who are completely unable to add new admin users.

While trying to reproduce it myself it appears this largely only impacts Mac users as I was not able to reproduce it on Chrome using Linux Mint (Strapi v4.16.2)

derrickmehaffy commented 8 months ago

Additional TID5494

derrickmehaffy commented 8 months ago

Hello all,

We are trying to actively figure out the root cause of this and we need some information from everyone.

Can you please either attach your

package.json
package-lock.json OR yarn.lock

Alternatively if you don't to send those publicly please email them to me directly derrick.mehaffy@strapi.io

Thank you

derrickmehaffy commented 8 months ago

We believe we have determined the root cause of this based on information provided by community users and some of our Strapi Cloud users.

For all Strapi projects, any package that starts with `@strapi/*` should be the same version, the only exception to this is `@strapi/plugin-seo`.

Thus if you have something like @strapi/strapi with the version of 4.16.2 then something like @strapi/plugin-graphql, @strapi/plugin-users-permissions, @strapi/plugin-i18n should all also be 4.16.2

We also advise deleting your package-lock.json and/or yarn.lock and regenerating them. If you still encounter the issue after this, please share your package.json.

Thanks

Agustin-BIDFTA commented 8 months ago

Howdy, I am experiencing the same issue. I've followed the thread from @derrickmehaffy and made sure every dependency with @strapi/* was the same, deleted yarn.lock and tried again. The issue persisted.

This is my package.json.

{
  "name": "bidfta-strapi",
  "private": true,
  "version": "0.1.0",
  "description": "A Strapi application",
  "scripts": {
    "develop": "strapi develop",
    "start": "strapi start",
    "build": "strapi build",
    "strapi": "strapi"
  },
  "dependencies": {
    "@strapi/strapi": "4.16.2",
    "@strapi/plugin-users-permissions": "4.16.2",
    "@strapi/plugin-i18n": "4.16.2",
    "@strapi/plugin-cloud": "4.16.2",
    "better-sqlite3": "8.6.0",
    "react": "^18.0.0",
    "react-dom": "^18.0.0",
    "react-router-dom": "5.3.4",
    "styled-components": "5.3.3",
    "@strapi/plugin-color-picker": "4.16.2",
    "@strapi/provider-upload-aws-s3": "4.16.2",
    "knex": "^2.0.0",
    "mysql": "^2.18.1"
  },
  "author": {
    "name": "Agustin"
  },
  "strapi": {
    "uuid": "5bb5a797-4208-49af-aa6b-1756a59eeacc"
  },
  "engines": {
    "node": "18.x.x",
    "npm": ">=6.0.0"
  },
  "license": "MIT",
  "devDependencies": {
    "prettier": "2.7.1"
  }
}

I can reproduce the issue both locally and on production with both windows and mac computer. I understand the pain of trying to fix something that isn't reproducible so if there's any further thing I can do to assist you, feel free to reach out. agustin@bidfta.com

joshuaellis commented 8 months ago

Can you share your lock file please?

Agustin-BIDFTA commented 8 months ago

Oops, there was an issue with my docker and it didn't load the latest dependencies when I updated my packages. This fixed my issue. Sorry for the extra hassle.

certainlyakey commented 7 months ago

@sdgroot Like I said above.

Pinning
"@radix-ui/react-dismissable-layer": "^1.0.5",
"@radix-ui/react-dialog": "^1.0.5"
fixes the issue since it is a miss match in version one is above 1.0.5 and the other is bellow it

Didn't work for me. Only upgrading to 4.20.x AND deleting package-lock.json helped.

derrickmehaffy commented 7 months ago

Marking this as closed as it's been narrowed down to a specific dependency being cached for some users.

certainlyakey commented 6 months ago

We still need a working solution for this that would not require deleting package-lock.json. In a monorepo where Strapi is just one of the packages, deleting package-lock.json is too disruptive because it might potentially cause new issues in unrelated packages.

derrickmehaffy commented 6 months ago

We still need a working solution for this that would not require deleting package-lock.json. In a monorepo where Strapi is just one of the packages, deleting package-lock.json is too disruptive because it might potentially cause new issues in unrelated packages.

Sorry but we have no other solution as that's the word from our engineering team.

You could delete, regenerate, diff, restore, and manually fix your lock but that is far outside of our scope.

It has always been our policy to treat the lock file as something replaceable.

ksoltanidev commented 3 weeks ago

Hi ! I hope I'm not doing something bad by reopening this thread. 👀 I run into the same issue with my Strapi app while developing a plugin with a Modal and a Select (both from strapi/design-system 1.19.0)

All my package.json have the same strapi/**** version : 4.25.8 except @strapi/design-system & @strapi/icons that are 1.19.0
While analyzing the package-lock, I undertsood that a this package is a dependency of "@strapi/design-system": 1.19.0: "@radix-ui/react-dropdown-menu" : "^2.0.6". But with the "^", package 2.1.1 was installed, which needs "@radix-ui/react-menu" : "^2.1.1" which also needs "@radix-ui/react-dismissable-layer" : "1.1.0". So by default, I did have the wrong version of @radix-ui/react-dismissable-layer installed.

to sum up : design-system 1.19.0 requires radix-ui/react-dropdown-menu ^2.0.6 (2.1.1 is installed as of today) which needs @radix-ui/react-menu 2.1.1 which needs and installs @radix-ui/react-dismissable-layer 1.1.0

This is why I added this to my package.json :

"overrrides" : {
  "@strapi/design-system" : {
    "@radix-ui/react-dropdown-menu" : "2.0.6"
  }
}

I also tried with :

"overrrides" : {
  "@radix-ui/react-dismissable-layer" : "1.0.5"
}

and both lines at the same time. With theses, after deleting package-lock.json and reinstalling all packages, I do end up with only "@radix-ui/react-dismissable-layer" : "1.0.5" installed. I thought that would be it for It still does not work. Closing the Select input closes the Modal too.

Thanks in advance for the help ! 🙂

Here find my package.json & package-lock.json package-lock.json package.json

package.json preview of dependencies :

  "devDependencies": {
    "@strapi/typescript-utils": "^4.25.8",
    "@types/jest": "^29.5.12",
    "@types/react": "^18.3.2",
    "@types/react-dom": "^18.3.0",
    "@types/react-router-dom": "^5.3.3",
    "@types/styled-components": "^5.1.34",
    "@typescript-eslint/eslint-plugin": "^7.7.1",
    "@typescript-eslint/parser": "^7.7.1",
    "better-sqlite3": "^11.1.2",
    "eslint": "^8.57.0",
    "eslint-config-prettier": "^9.1.0",
    "eslint-import-resolver-typescript": "^3.6.1",
    "eslint-plugin-import": "^2.29.1",
    "eslint-plugin-prettier": "^5.1.3",
    "jest": "^29.3.1",
    "prettier": "^3.2.5",
    "supertest": "^7.0.0",
    "ts-jest": "^29.1.5",
    "typescript": "5.0.4"
  },
  "dependencies": {
    "@_sh/strapi-plugin-ckeditor": "^2.1.1",
    "@ckeditor/ckeditor5-core": "^41.4.2",
    "@ckeditor/ckeditor5-markdown-gfm": "^41.4.2",
    "@ckeditor/ckeditor5-source-editing": "^41.4.2",
    "@ckeditor/ckeditor5-ui": "^41.4.2",
    "@strapi/plugin-documentation": "^4.25.8",
    "@strapi/plugin-graphql": "^4.25.8",
    "@strapi/plugin-i18n": "^4.25.8",
    "@strapi/plugin-users-permissions": "^4.25.8",
    "@strapi/provider-upload-aws-s3": "^4.25.8",
    "@strapi/strapi": "^4.25.8",
    "generate-password": "^1.7.0",
    "get-keycloak-public-key": "^1.0.3",
    "patch-package": "^8.0.0",
    "pg": "8.8.0",
    "react": "^18.0.0",
    "react-dom": "^18.0.0",
    "react-router-dom": "5.3.4",
    "redis": "^4.6.14",
    "strapi-health-plugin": "^1.0.1",
    "strapi-plugin-config-sync": "^1.2.3",
    "strapi-plugin-populate-deep": "^3.0.1",
    "strapi-plugin-transformer": "^3.1.2",
    "styled-components": "5.3.3"
  },
   "overrides": {
     "@radix-ui/react-dismissable-layer": "1.0.5",
     "@strapi/design-system": {
       "@radix-ui/react-dropdown-menu": "2.0.6"
     }
   },

strapi-bot commented 3 weeks ago

This issue has been mentioned on Strapi Community Forum. There might be relevant details there:

https://forum.strapi.io/t/open-new-issue-or-post-on-a-close-one/42392/1

strapi / strapi