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.

ember-headlessui/addon/components/dialog.hbs

Lines 9 to 15 in 418874b

	{{headlessui-focus-trap
	focusTrapOptions=(hash
	initialFocus=@initialFocus
	allowOutsideClick=this.allowOutsideClick
	setReturnFocus=this.setReturnFocus
	)
	}}

ember-headlessui/addon/components/dialog.ts

Lines 142 to 153 in 418874b

	@action
	allowOutsideClick(e: MouseEvent) {
	let target = e.target as HTMLElement;
	if (target && target.tagName !== 'BODY') {
	this.outsideClickedElement = target;
	}
	this.onClose();
	return true;
	}

[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