Can't close the popover using isShown prop modified by clicking button in the popover

[Szymon Nowak]

I've got a simple popover that has "cancel" and "confirm" buttons. When one of these buttons is clicked, I change a value that is assigned to isShown prop. However, when I click one of these buttons the popover is not hidden, even though isShown is set to false. The issue is (most likely) caused by the following check in hide method:

if (!this.get('_isMouseInside')) {
  this._hideTooltip();
}

When I click the button, the mouse is inside, so this._hideTooltip(); is not called. It looks like hide action explicitly sets _isMouseInside to false before calling hide.

[Max Fierke]

@szimek could you share your template code invoking ember-tooltips?

[Szymon Nowak]

Sure. I'm replacing a popover provided by a very old version of ember-boostrap with this library, so maybe there's something messed up there in my code.

popover-confirm.hbs

{{#ember-popover isShown=isVisible event="none" side="top" delay=0 delayOnChange=false effect="none" hideDelay=0}}
  <div class="popover-body">
    <p>{{yield}}</p>
    <div class="popover-buttons">
      {{#if cancel-button-label}}
        <button type="button" class="button cancel" {{action "cancel"}}>{{cancel-button-label}}</button>
      {{/if}}

      {{#if confirm-button-label}}
        <button type="button" class="button confirm" {{action "confirm"}}>{{confirm-button-label}}</button>
      {{/if}}
    </div>
  </div>
{{/ember-popover}}

I'm then using my popover-confirm component like this:

{{#popover-confirm
  isVisible=hasSelectedFile
  onConfirm=(action "sendFileTransferInquiry")
  onCancel=(action "cancelFileTransfer")
  confirm-button-label="Send"
  cancel-button-label="Cancel"
}}
  Do you want to send <strong>"{{filename}}"</strong> to <strong>"{{label}}"</strong>?
{{/popover-confirm}}

[Szymon Nowak]

I guess I'll have to figure out another way of setting up and closing these popovers anyway and trigger onCancel/onConfirm actions after the popover is really closed. I'm not sure if it's possible to call an action of a child component (feels kind of hacky), or maybe I could extend ember-popover and when user clicks one of these ok/cancel buttons, call hide action and then call functions passed as onCancel/onConfirm from popovers onHide callback. We'll see :)

The issue is that there's hardcoded _animationDuration of 200ms that is used when closing popovers, so even if I disable the isMouseInside check, with the way my code works, the data used by content displayed in the popover is gone before the popover disappears :/

[Max Fierke]

you can call hide for the popover component. we support this: https://github.com/sir-dunxalot/ember-tooltips#ember-popover

e.g. you could do something like this to pass through the ember-popover hide action into your own cancel action

{{#ember-popover isShown=isVisible event="none" side="top" delay=0 delayOnChange=false effect="none" hideDelay=0 as |popover|}}
  <div class="popover-body">
    <p>{{yield}}</p>
    <div class="popover-buttons">
      {{#if cancel-button-label}}
        <button type="button" class="button cancel" {{action "cancel" (action 'hide' target=popover)}}>{{cancel-button-label}}</button>
      {{/if}}

     {{! -- blah --!}}
    </div>
  </div>
{{/ember-popover}}

This would pass a callback that calls popover.hide() to your cancel action, which you could then call in your action to control when the hide happens.

You're right, though. That alone does not address the hard-coded animation duration, but you can also pass an onHide action to the component, which will get called once the popover or tooltip is fully hidden: https://github.com/sir-dunxalot/ember-tooltips#actions

[Michael Padon]

@maxfierke That hide action nesting really useful info to know. Maybe it can be added to the readme on isShown as a popover-specific section?

I have a use case where I would like to programmatically show or hide the popover by clicking on the trigger element, which means that the native hide action will not be accessible. I assumed isShown would solve this but it does not 😢

[Max Fierke]

@maprules1000 I think we should probably fix the bug and make it possible to toggle with isShown, just like tooltips, rather than documenting and supporting a convoluted workaround 😛 I'll take a look at doing so this week. Popovers need some love

[Max Fierke]

Mind taking a look at #338? It should resolve the issue here with toggling popovers using isShown

@szimek One caveat, is that modifying the var tied to isShown inside of the popover will cause a double-render error. I'm still looking into why that's happening.

@maprules1000 I added a test & example specifically for the case you're describing