Does DMenu work in Modals?

Development

AI-generated summary

In the Dev category, merefield reported an issue where a TextField nested inside a DMenu fails to respond to typing when rendered within a Modal, despite working correctly on standard pages. The user hypothesized that DMenu’s use of a portal, combined with the Modal’s focus management, might be the cause. awesomerobot confirmed this suspicion, suggesting that the portal is positioned outside the Modal and proposed adding @inline={{true}} to the DMenu component to render it directly within the Modal context. merefield responded that while they attempted this solution, they were unsure if @inline is supported for DMenu and had to implement a workaround override instead.

1

A search TextField when nested inside a DMenu and DropdownMenu, doesn’t seem to work in Modals.

It works fine on a normal page, e.g. profile settings, but when placed on a Modal the TextField doesn’t seem to respond to typing.

Is this because DMenu is using a portal and there is some problem with its relationship with the modal div?

Here’s an example:

Simply put, if I place a debugger statement on the search action, I can show that when placed in a Modal, you never arrive at the search function, but on a “normal” page (outside of a Modal), the event will fire correctly and the search is started.

You cant even type, even if I remove the event hooks.

If I place the TextField in this component outside of the DMenu (still accessed on a modal)- typing behaves as normal.

What am I missing, and why does the behaviour change?

2

Yes I think so, the portal is located outside of the modal and our focus management might be getting in the way (modals capture focus)… does adding @inline={{true}} to the DMenu fix it? that will put the menu directly within the modal.

3

Sorry for slow response and appreciate your comment - I did try that but not sure it’s supported for DMenu :thinking: ?

I ended up building a nasty override to implement it (and would be delighted to be able to remove that code)