NavigationMenu not working with hydration (React 18, Suspense)

[carstensbix]

If you add a Suspense Await block inside a NavigationMenu Item, you will get the following error:

Code:

<NavigationMenuItem>
        <NavigationMenuTrigger>
          <Suspense>
            <Await resolve={cart}>
              {(data) => {
                const {totalQuantity} = data || {};

                return (
                    {totalQuantity > 0 && (
                      <div className="pointer-events-none absolute bottom-2 right-1.5 h-3 w-3 rounded-full bg-secondary text-center text-[9px] leading-3 text-secondary-foreground">
                        {totalQuantity}
                      </div>
                    )}
                );
              }}
            </Await>
          </Suspense>
        </NavigationMenuTrigger>

        <NavigationMenuContent className="flex-col">

        Content here...

        </NavigationMenuContent>
      </NavigationMenuItem>

Error:

react-dom.development.js:20702 Uncaught Error: This Suspense boundary received an update before it finished hydrating. This caused the boundary to switch to client rendering. The usual way to fix this is to wrap the original update in startTransition. at updateDehydratedSuspenseComponent (react-dom.development.js:20702:48) at updateSuspenseComponent (react-dom.development.js:20362:16) at beginWork (react-dom.development.js:21624:14) at beginWork$1 (react-dom.development.js:27426:14) at performUnitOfWork (react-dom.development.js:26560:12) at workLoopSync (react-dom.development.js:26466:5) at renderRootSync (react-dom.development.js:26434:7) at performSyncWorkOnRoot (react-dom.development.js:26085:20) at flushSyncCallbacks (react-dom.development.js:12042:22) at commitRootImpl (react-dom.development.js:26959:3)

[carstensbix]

After troubleshooting for 4 hours, i found where the issue lies. It's these lines:

If you uncomment:

onIndicatorTrackChange={setIndicatorTrack} rootNavigationMenu={rootNavigationMenu}

on line 349 & 358 in https://github.com/radix-ui/primitives/blob/main/packages/react/navigation-menu/src/NavigationMenu.tsx

I would prefer a complete fix, as uncommenting these lines introduce a little minor problem with focusing if you have fields that gets focused it can make the menu close etc..

Can anyone use this to fix it in the radix ui package so everyone can use this with hydration?

[TheMikeyRoss]

This same thing is happening with me with Tooltip Trigger

[phamik]

Any updates on this? facing similar issues when using with NextJS 🙏

[benoitgrelard]

Can someone provide a reproduction sandbox?

[mikestopcontinues]

Also happening with the dropdown menu trigger. The issue is the generated id field is not stable. Using React 18.3, Remix 2.10.