Prevent popper closing when document is clicked

[garethellis36]

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?

[cristianpoleyJS]

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.

[etino]

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.

vue-popper/src/component/popper.js.vue

Line 392 in d076e6d

if (this.forceShow) {

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.