[BUG] - div-in-p issue in tooltip

[erfanium]

NextUI Version

2.4.8

Describe the bug

When using server components, there is a div-in-p hydration issue.

In HTML, <div> cannot be a descendant of <p>.
This will cause a hydration error.

I have debugged that.

nextui/packages/components/tooltip/src/tooltip.tsx

Lines 42 to 50 in 8de427b

	if (!isValidElement(children)) {
	trigger = <p {...getTriggerProps()}>{children}</p>;
	} else {
	const child = children as React.ReactElement & {
	ref?: React.Ref<any>;
	};
	trigger = cloneElement(child, getTriggerProps(child.props, child.ref));
	}

the result of this isValidElement(children) condition is false on server-side, but it will be true on client hydration. which results in different html output and a hydration error.

Your Example Website or App

No response

Steps to Reproduce the Bug or Issue

1. create a sample next.js 15 app
2. install nextui

use this page.tsx (updated)

import { Tooltip } from "@nextui-org/react";
import { connection } from "next/server";

async function AsyncWrapper({ children }: { children: React.ReactNode }) {
  return <>{children}</>;
}

export default function Home() {
  connection();
  return (
    <Tooltip content="Hello world">
      <AsyncWrapper>
        <div>Card</div>
      </AsyncWrapper>
    </Tooltip>
  );
}

Expected behavior

no error

Screenshots or Videos

No response

Operating System Version

Linux

Browser

Chrome

[linear]

ENG-1513 [BUG] - `div-in-p` issue in tooltip

[rishabhverma54321]

@wingkwong Could you please assign this issue to me?

[wingkwong]

@rishabhverma54321 assigned

[erfanium]

@rishabhverma54321 thanks! I can review and test your RR if you want

[rishabhverma54321]

Hi @erfanium thanks for asking! I'm not able to replicate this issue on my end. After debugging, I found that if you pass a valid JSX element into the Tooltip (which, in this case, you did), the isValidElement condition will always evaluate to true on both server-side and client-side hydration, resulting in the same element rendering on both sides. Could you provide a sandbox URL or screenshot to help troubleshoot?

[erfanium]

@rishabhverma54321
Yeah you are right. my reproduction code was not correct.

Here is the correct one:

import { Tooltip } from "@nextui-org/react";
import { connection } from "next/server";

async function AsyncWrapper({ children }: { children: React.ReactNode }) {
  return <>{children}</>;
}

export default function Home() {
  connection();
  return (
    <Tooltip content="Hello world">
      <AsyncWrapper>
        <div>Card</div>
      </AsyncWrapper>
    </Tooltip>
  );
}

You just need to wrap the Tooltip content inside a async server-side component.

and here is the reproduction repo:
https://github.com/erfanium/next-ui-tooltip-issue

[rishabhverma54321]

@erfanium I found that on the server side, AsyncWrapper might return a representation that resembles a lazy-loaded promise (i.e., it returns an object with a _payload indicating it's fulfilled). This could be why isValidElement doesn't recognize it correctly. One approach to address this is to wrap server-rendered content in a Suspense boundary to ensure proper client-side rendering.

import { Tooltip } from "@nextui-org/react";
import { connection } from "next/server";

async function AsyncWrapper({ children }: { children: React.ReactNode }) {
  return <>{children}</>;
}

export default function Home() {
  connection();
  return (
    <Tooltip content="Hello world">
    <Suspense fallback={<div>Loading...</div>}>
        <AsyncWrapper>
          <div>Card</div>
        </AsyncWrapper>
     </Suspense>
    </Tooltip>
  );
}

[erfanium]

@rishabhverma54321 I think something is wrong here. NextUI should either support Lazy object as the children or actually fix the validation logic to throw a meaningful error message.

Because the current logic (wrap the Lazy object with a p tag) is not correct at all.

[rishabhverma54321]

@erfanium https://github.com/nextui-org/nextui/pull/4053