vue-popper
vue-popper copied to clipboard
Prevent popper closing when document is clicked
I'd like to put a form inside a popper which is opened when a button is clicked. That is fine and easy to achieve with trigger="clickToOpen"
. However, whenever someone clicks outside the popper, the popper closes, which could be annoying for users. I want to control when the popper closes via a specific 'close' button and other events. Is this possible?
Hello, you can do it by placing the ref="<your-name>"
in your component <Popper>
. Then, captures when you click on an element and launch this.$refs.<your-name>.click()
and it should close.
This is an old issue, but the solution to achieve the behavior requested by @garethellis36 is the following
<template>
<div>
<popper trigger="clickToOpen" :force-show="show">
<div class="popper">
<button type="button" @click="close">Close Popover</button>
</div>
</popper>
<a @click="open" slot="reference" style="cursor: pointer">
// @click required to set force-show to true
Open Popover
</a>
</div>
</template>
<script>
import Popper from 'vue-popperjs'
export default {
components: {
Popper
},
methods: {
open(){
this.show= true;
}
close() {
this.show = false;
}
},
data(){
return {
show: false
}
}
}
</script>
Reviewing the source code, you can see that if force-show
is set to true, the handleDocumentClick
method when is fired by the Document.click
listener, returns before setting the showPopper
to false, so the Popover remains open.
https://github.com/RobinCK/vue-popper/blob/d076e6dc1aa510e3ce7d647baca8ab4fcc3f8152/src/component/popper.js.vue#L392
Pay attention to manage the open
data property bound with force-show
when you click in the reference slot otherwise it doesn't work.
I don't know if this project is still active, but could be useful to improve the documentation for this case.