```<details>``` tag @toggle triggers when :open changes
Sep 19th 2022
Vue version
3.2.39
Link to minimal reproduction
Steps to reproduce
- Make reactive variable and give default value 'about'. In this case: selectedAbout: 'privacy_policy'
- 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>
- Make method:
changeAboutDetails(e, toggleName) {
let toggled = e.returnValue
if (toggled) {
this.selectedAbout = toggleName
}
}
- 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
Sep 19th 2022
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.