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

MitchWeiss · 2023-09-12T03:03:37Z

Bug report

Current Behavior

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

Untitled.1.mp4

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: #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 · 2023-09-15T00:03:21Z

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 · 2023-09-28T17:56:18Z

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 · 2023-09-29T00:06:37Z

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 · 2023-09-29T01:33:40Z

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 · 2023-09-29T08:19:01Z

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 · 2023-10-30T16:09:31Z

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 · 2023-11-01T18:31:27Z

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

Slessi · 2023-11-10T16:39:56Z

overrides in package.json does work for me:

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

thibaudbrault · 2024-01-07T17:09:13Z

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 · 2024-01-08T22:29:20Z

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 · 2024-01-16T15:58:46Z

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 · 2024-02-12T14:48:29Z

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 · 2024-07-03T15:00:54Z

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 · 2024-07-04T08:12:28Z

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 · 2024-07-18T07:52:58Z

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 · 2024-07-24T14:04:15Z

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

Evavic44 · 2024-08-20T22:40:08Z

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 · 2024-08-21T03:20:27Z

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

SimRunBot · 2024-08-22T12:21:10Z

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

RWOverdijk · 2024-08-29T16:58:14Z

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 · 2024-09-10T14:13:48Z

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 · 2024-09-10T20:22:05Z

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 · 2024-09-11T13:48:43Z

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

Bumping select version seems to fix this weird recursion issue in Firefox when select is opened within a dialog/drawer radix-ui/primitives#2390

ariannargesi · 2024-10-22T08:39:14Z

Same issue here

aslammac mentioned this issue Oct 3, 2023

Select component throwing "too much reccursion error" when inside Dialog component shadcn-ui/ui#828

Closed

Fillipee mentioned this issue Nov 1, 2023

Too much recursion error, Select in Dialog in Firefox #2505

Closed

desduggan mentioned this issue Dec 18, 2023

Popover opened inside a Dialog closes immediately under certain circumstances #2348

Closed

arturbien mentioned this issue Sep 13, 2024

fix(select): firefox recursion issue whopio/frosted-ui#208

Merged

arturbien added a commit to whopio/frosted-ui that referenced this issue Sep 13, 2024

fix(select): firefox recursion issue (#208)

ef0a542

Bumping select version seems to fix this weird recursion issue in Firefox when select is opened within a dialog/drawer radix-ui/primitives#2390

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

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

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

MitchWeiss commented Sep 12, 2023

matthewsch-db commented Sep 15, 2023 •

edited

Loading

CamBurris commented Sep 28, 2023

MitchWeiss commented Sep 29, 2023

EduartePaiva commented Sep 29, 2023 •

edited

Loading

noinskit commented Sep 29, 2023

angelod1as commented Oct 30, 2023

Fillipee commented Nov 1, 2023

Slessi commented Nov 10, 2023

thibaudbrault commented Jan 7, 2024 •

edited

Loading

dwolrdcojp commented Jan 8, 2024

tywenk commented Jan 16, 2024 •

edited

Loading

ccssmnn commented Feb 12, 2024

adamlamaa commented Jul 3, 2024

chatwick commented Jul 4, 2024

sampittko commented Jul 18, 2024 •

edited

Loading

maciejkrol18 commented Jul 24, 2024

Evavic44 commented Aug 20, 2024

Velua commented Aug 21, 2024

SimRunBot commented Aug 22, 2024

RWOverdijk commented Aug 29, 2024 •

edited

Loading

marinbadrov commented Sep 10, 2024

acadams commented Sep 10, 2024

BenjaminLesne commented Sep 11, 2024

ariannargesi commented Oct 22, 2024

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

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

Comments

MitchWeiss commented Sep 12, 2023

Bug report

Current Behavior

Expected behavior

Reproducible example

Suggested solution

Additional context

Your environment

matthewsch-db commented Sep 15, 2023 • edited Loading

CamBurris commented Sep 28, 2023

MitchWeiss commented Sep 29, 2023

EduartePaiva commented Sep 29, 2023 • edited Loading

noinskit commented Sep 29, 2023

angelod1as commented Oct 30, 2023

Fillipee commented Nov 1, 2023

Slessi commented Nov 10, 2023

thibaudbrault commented Jan 7, 2024 • edited Loading

dwolrdcojp commented Jan 8, 2024

tywenk commented Jan 16, 2024 • edited Loading

ccssmnn commented Feb 12, 2024

adamlamaa commented Jul 3, 2024

chatwick commented Jul 4, 2024

sampittko commented Jul 18, 2024 • edited Loading

maciejkrol18 commented Jul 24, 2024

Evavic44 commented Aug 20, 2024

Velua commented Aug 21, 2024

SimRunBot commented Aug 22, 2024

RWOverdijk commented Aug 29, 2024 • edited Loading

marinbadrov commented Sep 10, 2024

acadams commented Sep 10, 2024

BenjaminLesne commented Sep 11, 2024

How I fixed it

update all radix packages:

delete node_modules and reinstall:

ariannargesi commented Oct 22, 2024

matthewsch-db commented Sep 15, 2023 •

edited

Loading

EduartePaiva commented Sep 29, 2023 •

edited

Loading

thibaudbrault commented Jan 7, 2024 •

edited

Loading

tywenk commented Jan 16, 2024 •

edited

Loading

sampittko commented Jul 18, 2024 •

edited

Loading

RWOverdijk commented Aug 29, 2024 •

edited

Loading