Skip to content

Commit e3c081a

Browse files
committed
Fix demo, note a caveat with body-attached elements
1 parent 99907d1 commit e3c081a

File tree

1 file changed

+9
-2
lines changed

1 file changed

+9
-2
lines changed

README.md

Lines changed: 9 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,7 @@
99
Sometimes you need to detect clicks **outside** of the element (to close a modal
1010
window or hide a dropdown select). There is no native event for that, and Vue.js
1111
does not cover you either. This is why `vue-clickaway` exists. Please check out
12-
the [demo](https://jsfiddle.net/simplesmiler/4w1cs8u3/) before reading further.
12+
the [demo](https://jsfiddle.net/simplesmiler/4w1cs8u3/150/) before reading further.
1313

1414
## Requirements
1515

@@ -78,7 +78,14 @@ export default {
7878
1. Pay attention to the letter case. `onClickaway` turns into `v-on-clickaway`,
7979
while `onClickAway` turns into `v-on-click-away`.
8080
2. Prior to `vue@^2.0`, directive were able to accept statements.
81-
This is no longer the case.
81+
This is no longer the case. If you need to pass arguments, just do
82+
`v-on-clickaway="() => away(arg1)"`.
83+
3. There is a common issue with dropdowns (and modals) inside an element with
84+
`v-on-clickaway`. Some UI libraries chose to implement these UI elements
85+
by attaching the DOM element directly to the body. This makes clicks on
86+
a dropped element trigger away handler. To combat that, you have to add
87+
an extra check in the handler, for where the event originated from.
88+
See #9 for an example.
8289

8390
## License
8491

0 commit comments

Comments
 (0)