drab-click in nested templates

[Cuong Truong]

hi, sorry if here is not the right place to ask about "features"!

so, I have something like:

<div drab-click="handler_outer">
....
  <%= if condition do %>
    <div drab-click="handler-inner">
      ...
    </div>
  <% end %>
....
</div>

Depends on the condition, the inner div may not be rendered. If it does get rendered, when I click the inner div, both the two handlers are fired. How do I prevent the outer handler to be executed in this case?

Thanks a lot!

[OvermindDL1]

Hmm, yeah I don't use nested click handlers as they are buggy at best in HTML, but this should be a simple case to prevent. You know how you can use, say, debounce(...) as an option for the click handler, well it would be easy to make something like stopPropagation that stops the propogation of the event, that way it's fully under user control so they only use it when they need it. Let me try something... Hold on...

[OvermindDL1]

Can you try depending on Drab master on github and see if the stopPropogation option works for you (and if not show your code). I.E. on the inner div add a drab-option="stopPropagation" attribute and test? :-)

If it works then tell me and I'll push a full release. :-)

[Cuong Truong]

hi, thanks for the push, but it does not work unfortunately!
if it helps, here is the verbatim relevant code snippet

<%= for nav <- @navs do %>
  <div class="row sidebar-highlightable <%= if @active_nav == nav._id, do: "sidebar-nav-active", else: "" %>"
       drab-click="expand('<%= nav._id %>')">
    <div class="col-12"><div class="py-3 my-auto hsep">
      <div class="text-light">
        <%= nav.label %>
        <span class="d-block float-right">
          <i class="fas fa-<%= nav.icon %>"></i>
        </span>
      </div>
      <%= if length(nav.children) > 0 and @expand_nav == nav._id do %>
        <%= for child <- nav.children do %>
          <div class="pt-2 my-auto text-light nav-text-hover <%= if @active_child == child._id, do: "text-orange", else: "" %>"
               drab-click="expand_child('<%= child._id %>')"
               drab-option="stopPropagation">
            &nbsp;<i class="fas fa-circle fa-xs"></i>
            &nbsp;<%= child.label %>
          </div>
        <% end %>
      <% end %>
    </div></div>
  </div>
<% end %>

and the handlers

defhandler expand(socket, _sender, nav_id) do
    Logger.info "Expand nav: #{nav_id}"
    poke socket, "sidebar.html", expand_nav: nav_id, active_nav: nav_id
  end

  defhandler expand_child(socket, _sender, child_id) do
    Logger.info "Expand child: #{child_id}"
    poke socket, "sidebar.html",  active_child: child_id
  end

I still see both the logs of the handlers...

[OvermindDL1]

Is this hosted publicly somewhere so I could trace through the javascript that's being run on the webpage?

[Cuong Truong]

sorry, it is a private projects, but i can try creating a stripped version for u...

[OvermindDL1]

That would be awesome if so, would save me so much time! :-)

[Cuong Truong]

so, i just pushed it here, just navigate to localhost:4000/nested

https://github.com/tduccuong/drab_test

thanks a lot!

[OvermindDL1]

That was perfect! Thanks much!

So the Drab option parsing is a little more limited than I thought, but it's not hard to expand it later, for now work around it by setting the attribute to drab-options="stopPropagation()", it needs to be drab-options (not drab-option my bad ^.^; ) and the stopPropagation needs to be stopPropagation().

Does that work? :-)

[Cuong Truong]

it works, thanks a lot 👍

[OvermindDL1]

Awesome, bumping version to 0.10.5 and releasing. :-)