Hiding popover on target click or inside click

[Brad Overton]

Hi,

I have a button/element that I would like to open a popover when it is clicked, and also close it when it is clicked. Additionally, I would like any click inside the popover to close it (while also maintaining the action that the item inside the popover would have done).

Here's an example of what I would like to achieve;

I have implemented like so

<div>
  <button>Export as</button>
  <EmberPopover
    @event="click"
    @arrowClass="hidden"
    @side="bottom-start"
    @popperContainer="body"
    @spacing={{0}}
    ...attributes
  >
    <ul>
      <li {{action "exportCSV"}}>CSV</li>
      ...
    </ul>
  </EmberPopover>
</div>

However the button only seems to open the popover, and clicking inside the popover also does not close it.

Is there a way to do what I am after with this addon? I know there is an isShown property for doing it programmatically but I'm not entirely sure how to do it with that either.

[Brad Overton]

I could probably use something like ember-basic-dropdown, but already using this addon for tooltips, and I've managed to style the popover like the dropdown I need so figured I could save a dependency if I can just get the show/hide working correctly

I also quite like how this addon lets me just place the popover component adjacent to what I want the trigger to be