jest-dom icon indicating copy to clipboard operation
jest-dom copied to clipboard

Support mutually exclusive `<details>` behavior via `name` attribute

Open aralroca opened this issue 7 months ago • 0 comments

Currently, jsdom doesn't implement the mutually exclusive behavior for <details> elements that share the same name attribute, as described in the HTML specification.

When multiple <details> elements share the same name attribute, opening one should automatically close others in the same named group, similar to how radio buttons work. This behavior should:

  1. Be triggered by both user interaction and programmatic changes
  2. Fire appropriate toggle events
  3. Maintain proper open attribute state

Browser implementations already support this behavior (tested in Chrome, Firefox, and Safari). Here's a test case demonstrating the expected behavior:

<details name="group1">
  <summary>Item 1</summary>
  Content 1
</details>
<details name="group1">
  <summary>Item 2</summary>
  Content 2
</details>

<script>
  document.querySelectorAll('details[name="group1"]').forEach(d => {
    d.addEventListener('toggle', () => console.log(d.open ? 'opened' : 'closed'));
  });
</script>

Expected behavior:

  • Clicking Item 1 opens it and closes Item 2 if it was open
  • Clicking Item 2 opens it and closes Item 1 if it was open
  • Only one item in the group can be open at a time

aralroca avatar Jul 21 '25 15:07 aralroca