HTML `<details>` tag not expanding correctly in Safari 16 when nested inside a `<form>`
After trying multiple solutions online, I still can't figure this out... I've been trying to implement an expandable section using the `<details>` tag inside a form, but I'm running into an scenario where the `<details>` element does not expand as expected in Safari 16. Here's a simplified version of my HTML: ```html <form> <details> <summary>Click to expand</summary> <p>This is some additional content hidden by default.</p> </details> </form> ``` In Chrome and Firefox, this works perfectly fine, and I can see the content when I click on the summary. However, in Safari, when I click the summary, nothing happens. I checked for JavaScript errors in the console, but there aren't any messages or issues noted. Additionally, I verified that there are no CSS rules that might prevent the expansion. I even tried wrapping the `<details>` in a `<div>` instead of directly in the `<form>`, but the same question continues. I also attempted adding a click event listener to the `<summary>` to manually toggle the open state, but that didn't resolve the scenario either: ```javascript const details = document.querySelector('details'); const summary = details.querySelector('summary'); summary.addEventListener('click', (e) => { details.open = !details.open; }); ``` This workaround does toggle the open state, but it feels like a hack rather than a solution. Has anyone encountered this question before, or does anyone know if there’s a known scenario with the `<details>` tag in forms specifically in Safari 16? Any insights would be greatly appreciated! This is part of a larger web app I'm building. This is my first time working with Html 3.10.