Hello, I have a simple HTML that contains a modal in itself, the main body you can see in the following code has a phx-click="reset"
def dashboard(assigns) do
~H"""
<div class="main-body" phx-click="reset">
<div id="mishka_top_nav" class="top-nav">
<div>Back To/History</div>
<div>Main Section</div>
<div>Settings</div>
</div>
<div
id="mishka_content"
data-id="mishka_content"
class="flex flex-col-reverse mx-auto justify-between items-stretch w-full rounded-t-md lg:flex-row"
phx-hook="dragAndDropLocation"
>
<%!-- Modal with phx-click-away={JS.push("something")} --%>
</div>
</div>
"""
end
When I select outside of modal, I need to call something, but it calls "reset", it should be noted when my modal is buggier than a normal size, if user clicks each empty place of modal, it runs reset event.
How can I command a div runs something like JavaScript stopPropagation? It is just for learning.
I fixed my problem with deleting phx-click="reset" from my main-body, but I think in the feature I am faced with this problem again.
<div phx-stop-propagation>
<%!-- Modal with phx-click-away={JS.push("something")} --%>
</div>
Thank you in advance.
