"Uncaught InternalError: too much recursion" Firefox Dropdown within Dialog

MitchWeiss commented 1 year ago

Bug report

Current Behavior

When opening a Select within a dialog on Firefox, it triggers an infinite recursion error "Uncaught InternalError: too much recursion".

https://github.com/radix-ui/primitives/assets/3953906/1aa26f18-0140-4b52-8496-40c3877b97c6

Expected behavior

No recursion error to occur

Reproducible example

https://codesandbox.io/s/funny-solomon-v5xcpq?file=/src/App.js

Additional context

Similar to the closed issue: https://github.com/radix-ui/primitives/issues/1681

Your environment

Software	Name(s)	Version
Radix Package(s)	react-dialog react-dropdown	1.0.4 2.0.4
React	n/a	17.2 & 18.2
Browser	Firefox	115.0.2 (64-bit)
Assistive tech
Node	n/a
npm/yarn
Operating System	OSX	13.4

matthewsch-db commented 1 year ago

I also am experiencing this when I open a Dialog from an option in a DropdownMenu. It occurs within handlers that say they are to refocus when it gets programmatically defocused. Perhaps the other component tries to steal focus and then they have a war?

Edit: Also, as a hacky workaround I can trigger the callback that opens the drawer with a delay like setTimeout(() => openDialog(), 100).

CamBurris commented 11 months ago

This is happening because the versions of @radix-ui/react-focus-scope don't match. In the sandbox provided, if you change @radix-ui/react-dialog to 1.0.3 and @radix-ui/react-dropdown-menu to 2.0.4 it will work as those versions have the same version of @radix-ui/react-focus-scope.

So either you need to install versions of packages with the same @radix-ui/react-focus-scope or force the same version via yarn resolutions or npm overrides.

MitchWeiss commented 11 months ago

Thanks for figuring that out @CamBurris. I can confirm that downgrading react-dialog to 1.0.3 resolves the problem.

I wonder if the maintainers would be able to upgrade the dependencies and release a new version as a better long term fix to this bug?

EduartePaiva commented 11 months ago

I had this same issue but after I updated all @radix-ui/ versions to the latest the issue solved itself. Seems like because I was making my project for a lot of days the versions got unmatched.

noinskit commented 11 months ago

Can this version compatibility be expressed in package version restrictions? I hit this problem having only these radix dependencies explicit in my package.json:

    "@radix-ui/react-icons": "^1.3.0",
    "@radix-ui/themes": "^1.1.2",

(There's obviously more including transitive dependencies, around 50 @radix* total.)

A simple npm upgrade resulted in a broken website (I'm using Radix Themes "Select" inside a Radix Themes "Dialog").

angelod1as commented 10 months ago

I've facing the same issue while using select inside dialog. I think this is the problem with redix-ui #radix-ui/primitives#2390 Have you fixed issue

I fixed it by adding this to package.json
 "resolutions": {
    "@radix-ui/react-focus-scope": "1.0.4"
  }
This will force every @radix-ui/react-focus-scope dependencies to use the same version

(quote from this issue)

I tried it but: warning Resolution field "@radix-ui/react-focus-scope@1.0.4" is incompatible with requested version "@radix-ui/react-focus-scope@1.0.3"

Fillipee commented 10 months ago

"resolutions": { "@radix-ui/react-focus-scope": "1.0.4" } Did not fix the issue for me.

Slessi commented 10 months ago

overrides in package.json does work for me:

  "overrides": {
    "@radix-ui/react-focus-scope": "1.0.4"
  }

thibaudbrault commented 8 months ago

Has anyone found a solution to this problem ? I tried the above solutions (adding an override for react-focus-scope and changing versions) but none worked. I currently have these packages and get the same error:

"@radix-ui/react-dialog": "^1.0.5",
"@radix-ui/react-dropdown-menu": "^2.0.6",
"@radix-ui/react-label": "^2.0.2",
"@radix-ui/react-select": "^2.0.0",

dwolrdcojp commented 8 months ago

I was just experiencing the same issue. I manually put the latest versions of each of the packages in my package.json file. deleted package-lock.json and node_modules folder then did a new build and it fixed the issue. For me the react-select was the one causing the recursion issue in firefox.

tywenk commented 8 months ago

Chiming in that setting "resolutions": { "@radix-ui/react-focus-scope": "1.0.4" } did work for me in my project. I use yarn.

My installed versions of the dialog and select packages ("@radix-ui/react-dialog": "^1.0.3", "@radix-ui/react-select": "^1.2.1",) were causing the above "too much recursion bug". Setting the resolution and reinstall node_modules fixed this recursion issue (+ a nice side effect where hovering/focusing now works as intended).

Before:

➜ yarn why @radix-ui/react-focus-scope
├─ @radix-ui/react-dialog@npm:1.0.0
│  └─ @radix-ui/react-focus-scope@npm:1.0.0 (via npm:1.0.0)
│
├─ @radix-ui/react-dialog@npm:1.0.5
│  └─ @radix-ui/react-focus-scope@npm:1.0.4 (via npm:1.0.4)
│
├─ @radix-ui/react-dialog@npm:1.0.0 [b1169]
│  └─ @radix-ui/react-focus-scope@npm:1.0.0 [2863c] (via npm:1.0.0 [2863c])
│
├─ @radix-ui/react-dialog@npm:1.0.5 [dc3fc]
│  └─ @radix-ui/react-focus-scope@npm:1.0.4 [738e3] (via npm:1.0.4 [738e3])
│
├─ @radix-ui/react-select@npm:1.2.2
│  └─ @radix-ui/react-focus-scope@npm:1.0.3 (via npm:1.0.3)
│
└─ @radix-ui/react-select@npm:1.2.2 [dc3fc]
   └─ @radix-ui/react-focus-scope@npm:1.0.3 [21bf3] (via npm:1.0.3 [21bf3])

After:

➜ yarn why @radix-ui/react-focus-scope
├─ @radix-ui/react-dialog@npm:1.0.0
│  └─ @radix-ui/react-focus-scope@npm:1.0.4 (via npm:1.0.4)
│
├─ @radix-ui/react-dialog@npm:1.0.5
│  └─ @radix-ui/react-focus-scope@npm:1.0.4 (via npm:1.0.4)
│
├─ @radix-ui/react-dialog@npm:1.0.0 [b1169]
│  └─ @radix-ui/react-focus-scope@npm:1.0.4 [738e3] (via npm:1.0.4 [738e3])
│
├─ @radix-ui/react-dialog@npm:1.0.5 [dc3fc]
│  └─ @radix-ui/react-focus-scope@npm:1.0.4 [738e3] (via npm:1.0.4 [738e3])
│
├─ @radix-ui/react-select@npm:1.2.2
│  └─ @radix-ui/react-focus-scope@npm:1.0.4 (via npm:1.0.4)
│
└─ @radix-ui/react-select@npm:1.2.2 [dc3fc]
   └─ @radix-ui/react-focus-scope@npm:1.0.4 [738e3] (via npm:1.0.4 [738e3])

Footnote: Perhaps a better fix is to update all radix component packages to their latest versions, and ideally don't have multiple versions installed, unlike me.

ccssmnn commented 7 months ago

Using overrides with npm does not solve this issue for me.

BEFORE:
npm ls @radix-ui/react-focus-scope
daqqi-monorepo@0.0.1 /Users/carlassmann/Projects/daqqi
└─┬ @daqqi/app@ -> ./packages/app
  ├─┬ @radix-ui/react-context-menu@2.1.5
  │ └─┬ @radix-ui/react-menu@2.0.6
  │   └── @radix-ui/react-focus-scope@1.0.4 deduped
  ├─┬ @radix-ui/react-dialog@1.0.5
  │ └── @radix-ui/react-focus-scope@1.0.4
  ├─┬ @radix-ui/react-popover@1.0.7
  │ └── @radix-ui/react-focus-scope@1.0.4 deduped
  ├─┬ @radix-ui/react-select@1.2.2
  │ └── @radix-ui/react-focus-scope@1.0.3
  └─┬ cmdk@0.2.1
    └─┬ @radix-ui/react-dialog@1.0.0
      └── @radix-ui/react-focus-scope@1.0.0

AFTER:
npm ls @radix-ui/react-focus-scope
npm ERR! code ELSPROBLEMS
npm ERR! invalid: @radix-ui/react-focus-scope@1.0.3 /Users/carlassmann/Projects/daqqi/node_modules/@radix-ui/react-select/node_modules/@radix-ui/react-focus-scope
npm ERR! invalid: @radix-ui/react-focus-scope@1.0.0 /Users/carlassmann/Projects/daqqi/node_modules/cmdk/node_modules/@radix-ui/react-focus-scope
daqqi-monorepo@0.0.1 /Users/carlassmann/Projects/daqqi
└─┬ @daqqi/app@ -> ./packages/app
  ├─┬ @radix-ui/react-context-menu@2.1.5
  │ └─┬ @radix-ui/react-menu@2.0.6
  │   └── @radix-ui/react-focus-scope@1.0.4 deduped
  ├─┬ @radix-ui/react-dialog@1.0.5
  │ └── @radix-ui/react-focus-scope@1.0.4 overridden
  ├─┬ @radix-ui/react-popover@1.0.7
  │ └── @radix-ui/react-focus-scope@1.0.4 deduped
  ├─┬ @radix-ui/react-select@1.2.2
  │ └── @radix-ui/react-focus-scope@1.0.3 invalid: "1.0.4" from node_modules/@radix-ui/react-select overridden
  └─┬ cmdk@0.2.1
    └─┬ @radix-ui/react-dialog@1.0.0
      └── @radix-ui/react-focus-scope@1.0.0 invalid: "1.0.4" from node_modules/cmdk/node_modules/@radix-ui/react-dialog overridden

Even with enforced same versions, the select primitive produces the recursion error inside a dialog in Firefox.

Important note: In Safari and Chrome there is no error in the console, but the select inside a dialog is not usable with a keyboard. No focus states, no arrow up/down navigation.

The Dropdown menu works, which is what I use until this issue is resolved.

adamlamaa commented 2 months ago

Downgrading to:

    "dependencies": {
        "@radix-ui/react-select": "2.0.0",
    }

Along with

  "overrides": {
    "@radix-ui/react-focus-scope": "1.0.4"
  }

Solved this for me for now.

chatwick commented 2 months ago

In my case @radix-ui/react-select had a dependency for @radix-ui/react-focus-scope@1.0.3 and others were using @radix-ui/react-focus-scope@1.1.0

So adding the override

"overrides": {
    "@radix-ui/react-focus-scope": "1.1.0"
  }

and reinstalling @radix-ui/react-select fixed the issue for me

yarn remove @radix-ui/react-select

and

yarn add @radix-ui/react-select

sampittko commented 1 month ago

Updating all Radix UI packages to the latest versions that have dependency to @radix-ui/react-focus-scope in the project + adding an override on @radix-ui/react-focus-scope package to it's latest version solved the issue for me.

maciejkrol18 commented 1 month ago

Updating @radix-ui/react-dialog to the latest version (1.1.1 as of writing) fixed this for me

Evavic44 commented 3 weeks ago

Confirmed this issue is caused by a mismatch/outdated react-[ ] shadcn libraries. In my case, @radix-ui/react-dropdown-menu was at version 2.0.6 and @radix-ui/react-alert-dialog at 1.1.1.

Fixed this by upgrading react-dropdown-menu to the latest version. Didn't even need any of the hacks suggested.

npm uninstall @radix-ui/react-dropdown-menu
npm i @radix-ui/react-dropdown-menu@latest

Velua commented 3 weeks ago

I fixed this with yarn add @radix-ui/react-dialog@latest @radix-ui/react-dropdown-menu@latest @radix-ui/react-slot@latest

SimRunBot commented 3 weeks ago

adding @radix-ui/react-select to the list of packages that needed to be updated to the latest version

RWOverdijk commented 2 weeks ago

I have removed, re-added and nuked node_modules. Installed latest, too. Still have this issue unfortunately.

What is the underlying cause? Is it a duplicate package with different versions for example? Because then it's something that can be checked.

ETA: Someone in the comments said it's due to multiple versions of @radix-ui/react-focus-scope, but I checked and it's all v1.1.0 in my project.

marinbadrov commented 5 days ago

Had this issue while using Turborepo. One of my packages had older versions of shadcn components installed, so when I installed the package in my app, I would get this issue even though I wasn't directly importing/using any of the components.

acadams commented 5 days ago

I noticed this issue after upgrading @radix-ui/react-dropdown-menu from 2.0.6 to 2.1.1 and had to revert back to the former.

BenjaminLesne commented 4 days ago

How I fixed it

update all radix packages:

pnpm update @radix-ui/* --latest

which update my package.json to:

 {
   "@radix-ui/react-accordion": "^1.2.0",
    "@radix-ui/react-checkbox": "^1.1.1",
    "@radix-ui/react-dialog": "^1.1.1",
    "@radix-ui/react-dropdown-menu": "^2.1.1",
    "@radix-ui/react-label": "^2.1.0",
    "@radix-ui/react-popover": "^1.1.1",
    "@radix-ui/react-scroll-area": "^1.1.0",
    "@radix-ui/react-select": "^2.1.1",
    "@radix-ui/react-slider": "^1.2.0",
    "@radix-ui/react-slot": "^1.1.0",
    "@radix-ui/react-tabs": "^1.1.0",
    "@radix-ui/react-toast": "^1.2.1",
    "@radix-ui/react-tooltip": "^1.1.2",
    }

delete node_modules and reinstall:

rm -rf ./node_modules/ && pnpm install

radix-ui / primitives