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

[robinck]

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

[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.

[jonnedeprez]

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

[RobinCK]

Please provide more details.

[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/

[huanglvming]

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

…

------------------ 原始邮件 ------------------ 发件人: "Jonne Deprez"<[email protected]>; 发送时间: 2019年9月24日(星期二) 晚上9:19 收件人: "RobinCK/vue-popper"<[email protected]>; 抄送: "黄律铭"<[email protected]>;"Manual"<[email protected]>; 主题: 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"<[email protected]>; 发送时间: 2019年9月25日(星期三) 下午2:53 收件人: "RobinCK/vue-popper"<[email protected]>; 抄送: "黄律铭"<[email protected]>;"Mention"<[email protected]>; 主题: 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.