`<details>` element behaves incorrectly in Next.js 14/15

mikedidomizio commented 2 months ago

Link to the code that reproduces this issue

https://github.com/mikedidomizio/details-element-in-Next-14

To Reproduce

First sorry that the GitHub link is for Next14, it doesn't matter here

The <details> HTML element is an accordion style HTML tag that can show and hide information.

The onToggle event is expected to automatically fire on render if open is set to true Documentation

In the example above the event listener will be called once without any user interaction because the open attribute is set.

Below are CodeSandbox examples, the way to see if it automatically fire is to open the developer tools console and see that a console.log is either done or not.

In HTML it works that way ✅

In React 19 it works that way ✅

In React 18 it works that way ✅

In Next.js 15 it doesn't seem to work that way 🤔

In Next.js 14 it doesn't seem to work that way 🤔

So HTML/React will automatically trigger the onToggle event on render if open is set to true, but not Next.js.

Is this a bug or am I doing something wrong with the Next example?

(Originally posted on the Discord/Forum)

https://github.com/user-attachments/assets/f70b5f76-e31a-4072-8de8-35a6ace844f6

Current vs. Expected behavior

Current behaviour:

Unless my examples are incorrect it seems that Next.js behaves differently than others.

Expected behaviour:

Consistent with others, onToggle event is fired immediately on mount if open is true. I'm a bit conflicted, it should probably behave the same even if I don't like the idea of it automatically being triggered.

Provide environment information

Operating System:
  Platform: darwin
  Arch: arm64
  Version: Darwin Kernel Version 23.3.0: Wed Dec 20 21:30:44 PST 2023; root:xnu-10002.81.5~7/RELEASE_ARM64_T6000
  Available memory (MB): 32768
  Available CPU cores: 10
Binaries:
  Node: 18.18.2
  npm: 9.8.1
  Yarn: 1.22.19
  pnpm: 9.1.1
Relevant Packages:
  next: 14.2.5 // There is a newer version (14.2.8) available, upgrade recommended!
  eslint-config-next: 14.2.5
  react: 18.3.1
  react-dom: 18.3.1
  typescript: 5.5.3
Next.js Config:
  output: export
 ⚠ There is a newer version (14.2.8) available, upgrade recommended!
   Please try the latest canary version (`npm install next@canary`) to confirm the issue still exists before creating a new issue.
   Read more - https://nextjs.org/docs/messages/opening-an-issue

Which area(s) are affected? (Select all that apply)

Not sure

Which stage(s) are affected? (Select all that apply)

next dev (local), next start (local)

Additional context

I tested with building a production build with static export as well, same thing, no auto-fire.

seung-juv commented 2 months ago

As far as I know

console.log(window);

There is no problem when annotated.

seung-juv commented 2 months ago

This issue seems to be handled by onToggle on the Client Side when an error occurs on the Server side.

mikedidomizio commented 2 months ago

As far as I know
console.log(window);
There is no problem when annotated.

That was more left in the code for someone to try. I've removed it to avoid confusion that it may be related to the issue.

seung-juv commented 2 months ago

When I tested it in canary, everything is working normally.

mikedidomizio commented 2 months ago

When I tested it in canary, everything is working normally.

The Next 15 example above is Canary 146, but I just checked Canary 152. Same result.

According to the HTML specification for <details> it's not working as expected with Next@15, but again maybe it's the examples. If you can show an example that shows it working properly in Next@15, that would clarify things. Check the console between React/HTML and Next.js to see the difference on render.

vercel / next.js