Is there anyway to close the popover while clicking any content of the popover?

[Guobacai]

Method "handleDocumentClick" won't set the "showPopper" to false if user clicks any content in the popover "e.target".
Is there any recommended way to do so?
If not, would that be a good feature?

[RobinCK]

Please provide more details.

[greyphilosophy]

We are running into this issue too. Inside the popover we have several buttons. When a user clicks one of those buttons we would like the popover to close.

[huanglvming]

anyone to answer this question?

[greyphilosophy]

What we ended up doing is putting an @blur on the button that opens the popover. That way any click anywhere will close it. But it closes faster than clicks on the popover can be recognized so we put a delay on it to give time for the click to hit the menu button. In our case we have a table of users, and we use the userID to identify which popover belongs to which row.

<popper
    :force-show="showPopper.includes(member.userID)"
    trigger="click"
>
    <div class="popper">
        <button
            class="menu"
            @click="doSomething(member.userID)"
        >
    </div>
    <div slot="reference"/>
</popper>
<button
    class="action-dots"
    @click="openPopper(member.userID)"
    @blur="slowClose()"
>

Because someone can click from one popover to another we could potentially, for a split second, have two popovers open at once. So we keep track of which ones should be shown in an array.

data() {
    return {
      showPopper: []
    }
}

And our methods look like this:

methods: {
    openPopper(popperId) {
      this.showPopper.includes(popperId) ? this.showPopper = [] : this.showPopper.push(popperId);
    },
    slowClose() {
      _.delay(() => { this.showPopper.shift() }, 200);
    },
}

The ternary is in there because two clicks on the same button should close the popover.

This feels a lot like a hack, so if anyone else has a better solution please share!

[huanglvming]

@RobinCK come and fix the issue

[RobinCK]

Пожалуйста посмотрите похожую проблему #114

[greyphilosophy]

#114 helps, but I still run into the problem of the popover closing faster than the click on the button inside it being registered.

[RobinCK]

please jsfiddle example

[greyphilosophy]

@RobinCK спасибо, что заглянули в это

https://jsfiddle.net/greyphilosophy/v0joqcL3/9/

[jonnedeprez]

I solved programmatic closing of popper like this:
https://jsfiddle.net/jonnedeprez/mtk0npbo/

[huanglvming]

Thanks, this method works. But i wanna know where the function doClose is defined?

…

------------------ 原始邮件 ------------------ 发件人: "Jonne Deprez"<notifications@github.com>; 发送时间: 2019年9月24日(星期二) 晚上9:19 收件人: "RobinCK/vue-popper"<vue-popper@noreply.github.com>; 抄送: "黄律铭"<237737971@qq.com>;"Manual"<manual@noreply.github.com>; 主题: Re: [RobinCK/vue-popper] Is there anyway to close the popover whileclicking any content of the popover? (#116) I solved programmatic closing of popper like this: https://jsfiddle.net/jonnedeprez/mtk0npbo/ — You are receiving this because you are subscribed to this thread. Reply to this email directly, view it on GitHub, or mute the thread.

[greyphilosophy]

@huanglvming it's part of the vue-popper. You can search for it to find where it is defined.

[huanglvming]

thanks a lot

…

------------------ 原始邮件 ------------------ 发件人: "greyphilosophy"<notifications@github.com>; 发送时间: 2019年9月25日(星期三) 下午2:53 收件人: "RobinCK/vue-popper"<vue-popper@noreply.github.com>; 抄送: "黄律铭"<237737971@qq.com>;"Mention"<mention@noreply.github.com>; 主题: Re: [RobinCK/vue-popper] Is there anyway to close the popover whileclicking any content of the popover? (#116) @huanglvming it's part of the vue-popper. You can search for it to find where it is defined. — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub, or mute the thread.