Open a modal inside a dropdown

[elalemanyo]

Hi,
Is there a way to open a modal inside a dropdown?
Thanks!

[acejam]

@elalemanyo Did you ever find a solution to this? I came across the same issue.

[excid3]

What are you having trouble with?

[acejam]

What are you having trouble with?

@excid3 The issue is the modal does not open. I have a basic dropdown menu. One of the menu items is a link, which should open a modal when clicked.

My code is very similar to the provided usage examples. From a code structure perspective, I effectively have modal example code inside of dropdown example code. Here is a gist that shows my exact issue:

https://gist.github.com/acejam/6a678e54739651b8d32e4c3e1ea6a44f

The browser console will through a Uncaught (in promise) DOMException: The user aborted a request.

Is there a better way to launch a modal from a dropdown menu?

[excid3]

You might need to use the :prevent Stimulus option on the modal link's click action.

[acejam]

You might need to use the :prevent Stimulus option on the modal link's click action.

That's actually one of the first things that I tried. Unfortunately, it did not make any difference.

[excid3]

Can you update your example with what you tried?

[acejam]

Can you update your example with what you tried?

Sure, it was very basic though: data-action="click->modal#open:prevent"

My thinking is that the Dropdown and Modal controllers are stepping on each other here. Perhaps because we have one data-controller inside of another data-controller?

[acejam]

@excid3 Unfortunately I'm still battling against this. I was able to get rid of the The user aborted a request error by commenting out the promise code from transition.js. I think the two Stimulus controllers are stepping on each other somehow.

[excid3]

I fiddled with it, but didn't have enough time to figure out what was going wrong. Also, the modal being inside a relative element made the modal show up inside the menu, so that CSS needs some adjustment too.

[excid3]

This should work now that we're using the <dialog> element for modals and slideovers.