Closing issue when using powerselect inside a dialog

[aatauil]

When using ember-power-select inside the dialog, the dialog will trigger the @onClose event whenever clicking on the dropdown of the power select. The dropdown of the power-select gets rendered inside the 'ember-basic-dropdown-wormhole' div that is right under the body tag.

I tried to dig into it a bit and found out that it is caused by the headlessui-focus-trap modifier. Specifically allowOutsideClick that always calls the this.onClose(). I am rather unsure why this is the case for a dialog component as I am guessing that notification toasts for example will probably also close the dialog unless if it is rendered inside the <Dialog />'component.

https://github.com/GavinJoyce/ember-headlessui/blob/418874b16d5e83b1e1ee3be2634beaeb1c2f3265/addon/components/dialog.hbs#L9-L15

https://github.com/GavinJoyce/ember-headlessui/blob/418874b16d5e83b1e1ee3be2634beaeb1c2f3265/addon/components/dialog.ts#L142-L153

[aatauil]

FYI, if anyone else encounters this issue, you can just add the renderInPlace property and set it to true and that will solve the issue for power-select

  <PowerSelect
    @renderInPlace={{true}}
    @options={{this.options}}
    @selected={{this.selected}}
    @onChange={{fn (mut this.selected)}} as |item|>
    {{item.name}}
  </PowerSelect>

[far-fetched]

And you can try to refactor it and use either litsbox or menu component ;)

[aatauil]

And you can try to refactor it and use either litsbox or menu component ;)

Yeah for simple dropdown use, absolutely! but went for power-select since I want to take advantage of the search function + multi-select without having to implement it myself :p