<details> tag @toggle triggers when :open changes

[matvejs16]

Vue version

3.2.39

Link to minimal reproduction

https://sfc.vuejs.org/#eNrtVm1r20AM/iuaGaSFxIbl00IyWrpPYy9lGxsDQ1Btxbnt3nYv6Urpf5/OdlPnhY5+Xo8QztIjPZJOOvs2O7c230TKZtk8kLISA70pNfCa1xRQSA9nwTSNpEWZVWvUDZ1fmRjedsqTl7QhHcYwsk5ssLpZWiNFdTM6LTOYGUuazTxJqgLVrSEsFosDdJn1pEzro1LobqCS6D1b30N7LEMvOwlctoJ50Vs8uKjFZmveZ7FcCr0yy+W1Q2vJDQgZv54ewoMIkhj2neACHUEX/A8THfT882I9HXqxh04sOmwcrtjPe+NIjUFYjhZqI40DLwKgogCV0T5VKLBzrIUVXlRCN0BShBw+CB09eCNjQPgd0QsQylLN1mR8AjWkawEbRtiAQVwxXESOGTlTgarzz5bJ/4ZFCeQBqyp61EFwQBJj3W9TG3CsY+B/Z8CsVhyM8GPAyOfcRt4ytJFzvlExO/KOyXRLIXygF/C/JTwv7EMHFtyC7RPvumbonp42U4Gc8kvU9ZIT4vQFp/WvyTpqs233g+nq4C1+YMD4r0kB57qGi614f9SeNmiPjtm76AN8MYrgExf0c5TEbIP5ep6u5+nqm+7obM2LweuLH33lhA28pz9MHKCmFUYZ4LZzopluBiNMc3OJDY3GnbzGgCen96i0XCqjHkrS2hk8drT/PtuC77rtXe+fk1yb2s+G/o7cAFyu7oL4yHHuhJOW5Ep16hoWQHkX4jeUkXaB6aCMpFya5qQ3ON1FiBVsNfs0aYW18PneLTMIbdegz3WYdqn5x9dGdxrZOONW4+OYKLT5T280f3e0rGWv4JtnW5sy4w+T9Fxm6xCsnxVF1PZXk1dGFWesK1zkHlM0qY06m+av8ulr7g0fhvKcvJpcOXPtyTFjmfUH0TovWMgNPHHccuTSZfUI2R52h3BPd0CaOFMtsru/c29MUw==

Steps to reproduce

1. Make reactive variable and give default value 'about'. In this case: selectedAbout: 'privacy_policy'
2. Make 2 html elements with details tag
   Example:

<details @toggle="changeAboutDetails($event, 'privacy_policy')" :open="selectedAbout === 'privacy_policy'"></details>
<details @toggle="changeAboutDetails($event, 'terms_and_conditions')" :open="selectedAbout === 'terms_and_conditions'"></details>

3. Make method:

changeAboutDetails(e, toggleName) {
  let toggled = e.returnValue
  if (toggled) {
    this.selectedAbout = toggleName
  }
}

4. Click on terms_and_conditions details.

What is expected?

Open attribute have to be changed on both and "toggle" method only triggers on clicked element.

What is actually happening?

Clicking on element cause a infinite @toggle event loop.

System Info

System:
    OS: Linux 5.13 Ubuntu 20.04.4 LTS (Focal Fossa)
    CPU: (12) x64 Intel(R) Core(TM) i7-8700 CPU @ 3.20GHz
    Memory: 35.11 GB / 62.68 GB
    Container: Yes
    Shell: 5.0.17 - /bin/bash
Binaries:
    Node: 17.9.0 - /usr/bin/node
    npm: 8.19.1 - /usr/bin/npm
Browsers:
    Chrome: 104.0.5112.79
    Firefox: 104.0
npmPackages:
    vue: ^3.2.39 => 3.2.39

Any additional comments?

No response

[LinusBorg]

The toggle event will necessarily trigger on both, because when one opens, the other closes - and both of these changes trigger a toggle event.

This is not a Vue bug, So I'll turn this into a discussion thread.