Next.js Discord

Discord Forum

Difference between HTML, React and Next.js and the `<details>` HTML element?

Unanswered
Northern Goshawk posted this in #help-forum
Open in Discord
Northern GoshawkOP
The [<details>](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/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](https://developer.mozilla.org/en-US/docs/Web/API/HTMLDetailsElement/toggle_event)

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

ℹ️ Below are StackBlitz 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 seems to work that way](https://stackblitz.com/edit/stackblitz-starters-ntghgv?file=index.html)

In React [it seems to work that way](https://stackblitz.com/edit/vitejs-vite-fxdg4n?file=src%2FApp.tsx)

In Next.js [it doesn't seem to work that way](https://stackblitz.com/edit/stackblitz-starters-6dxep5?file=components%2FClient.tsx)

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?

0 Replies