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

[MitchWeiss]

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

Suggested solution

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]

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]

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]

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]

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]

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]

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/[email protected]" is incompatible with requested version "@radix-ui/[email protected]"

[Fillipee]

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

[Slessi]

overrides in package.json does work for me:

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

[thibaudbrault]

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]

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]

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]

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

BEFORE:
npm ls @radix-ui/react-focus-scope
[email protected] /Users/carlassmann/Projects/daqqi
└─┬ @daqqi/app@ -> ./packages/app
  ├─┬ @radix-ui/[email protected]
  │ └─┬ @radix-ui/[email protected]
  │   └── @radix-ui/[email protected] deduped
  ├─┬ @radix-ui/[email protected]
  │ └── @radix-ui/[email protected]
  ├─┬ @radix-ui/[email protected]
  │ └── @radix-ui/[email protected] deduped
  ├─┬ @radix-ui/[email protected]
  │ └── @radix-ui/[email protected]
  └─┬ [email protected]
    └─┬ @radix-ui/[email protected]
      └── @radix-ui/[email protected]

AFTER:
npm ls @radix-ui/react-focus-scope
npm ERR! code ELSPROBLEMS
npm ERR! invalid: @radix-ui/[email protected] /Users/carlassmann/Projects/daqqi/node_modules/@radix-ui/react-select/node_modules/@radix-ui/react-focus-scope
npm ERR! invalid: @radix-ui/[email protected] /Users/carlassmann/Projects/daqqi/node_modules/cmdk/node_modules/@radix-ui/react-focus-scope
[email protected] /Users/carlassmann/Projects/daqqi
└─┬ @daqqi/app@ -> ./packages/app
  ├─┬ @radix-ui/[email protected]
  │ └─┬ @radix-ui/[email protected]
  │   └── @radix-ui/[email protected] deduped
  ├─┬ @radix-ui/[email protected]
  │ └── @radix-ui/[email protected] overridden
  ├─┬ @radix-ui/[email protected]
  │ └── @radix-ui/[email protected] deduped
  ├─┬ @radix-ui/[email protected]
  │ └── @radix-ui/[email protected] invalid: "1.0.4" from node_modules/@radix-ui/react-select overridden
  └─┬ [email protected]
    └─┬ @radix-ui/[email protected]
      └── @radix-ui/[email protected] 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]

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]

In my case @radix-ui/react-select had a dependency for @radix-ui/[email protected] and others were using @radix-ui/[email protected]

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]

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]

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