search

ndelvalle / v-click-outside

🔲 Vue directive to react on clicks outside an element without stopping the event propagation
MIT License
967 stars 88 forks source link

Does not work on desktop without touch simulation enabled in dev tools #669

Closed aqari-dev closed 1 year ago

aqari-dev commented 1 year ago

Hello, this package works fine on mobile but does not fire assigned function on desktop - unless "touch simulation" is enabled in developer tools' mobile mode (on firefox) - has anyone come across this?

aqari-dev commented 1 year ago

Closing, this had to do with my layout. If you have v-click-outside nested inside another element and state is toggled back and forth by parent element and the child element you have v-click-outside directive on, then the event handler gets confused. My solution was to add id to parent element and check in the v-click-outside handler to make sure event.target.id !== <parent id>

this way when parent is clicked, state gets toggled to true and stays that way. without this, first it gets toggled to true as a result of parent click, and then v-click-outside flips it back to false