Drab interferes with Bootstrap data-toggle

[Guido Tripaldi]

When Drab is added to a navigation item like in

<div class="nav nav-pills " role="tablist">
    <a class="nav-link" id="v-pills-one" data-toggle="pill" href="#" role="tab"  drab="click:show_panel('one')">One</a>
    ....
</div

clicking on the item will not toggle its activation anymore.

In the following example we have a left panel with four items from those the user can choose which content will be showed on the right panel. To demonstrate the problem, only the first two items has the Drab call. If you try to click on the items you will see that the active state will be toggled only for items three and four:

# test_controller.ex

  def index(conn, _params) do
    render(conn, "panels.html", active_panel: "one")
  end

# test_commander.ex

defhandler show_panel(socket, sender, panel) do
  poke socket,  active_panel: panel
end

<!-- index.html.drab -->

<div class="height-vt">
	<div class="row h-100">
		<!-- Navigation panel -->
		<div id="navigation-panel" class="col-2 h-100 table table-responsive bg-light">
			<div class="nav flex-column nav-pills p-3" id="v-pills-tab" role="tablist" aria-orientation="vertical">
			  <a class="nav-link active" id="v-pills-one" data-toggle="pill" href="#" role="tab"  drab="click:show_panel('one')">One</a> <!-- this item will not be reactivate on click because of drab -->
			  <a class="nav-link" id="v-pills-two" data-toggle="pill" href="#" role="tab"  drab="click:show_panel('two')">Two</a> <!-- this item will not be reactivate on click because of drab -->
			  <a class="nav-link" id="v-pills-three" data-toggle="pill" href="#" role="tab" >Three</a> <!-- this item will be reactivate on click -->
			  <a class="nav-link" id="v-pills-four" data-toggle="pill" href="#" role="tab" >Four</a>  <!-- this item will be reactivate on click -->
			</div>
		</div>

		<!-- Content panel -->	
		<div id="content-panel" class="col-8 h-100">
			<%= case @active_panel do
				    "one" -> raw "<h1>Panel One</h1>" # render("_panel_one.html")
				    "two" -> raw "<h1>Panel Two</h1>" # render("_panel_two.html")
				    "three" -> raw "<h1>Panel Three</h1>" # render("_panel_three.html")
				    "four" -> raw "<h1>Panel Four</h1>" # render("_panel_four.html")
				    _ -> ""
				end 
			%>
		</div>
	</div>
</div>

[Tomek Gryszkiewicz]

Thanks for reporting, @guidotripaldi!

I managed to reproduce this error (it is worth mentioning it is Bootstrap 4, and needs jquery).

The issue is because Drab disables this <a> element while it is processing on the server side, and boostrap does not want to activate the disabled element. Setting disable_controls_while_processing: false has proven it.

As a workaround, you may use "mouseup:show_panel('one')" instead of click event. Mouseup is not the event which disables the control. But I am afraid we need some special case for this. I am thinking of:

1. Adding something like attribute drab-options="disable_while_processing: false"or drab-do-not-disable to let you control this behaviour
2. Adding a corner case list: do_not_disable_elements: ["nav-link"] to setup; this would be better because it works out of the box for your case; but worse because we need to keep track on the elements we don't want to disable for all bootstraps, foundations and all the CSS libraries

[Guido Tripaldi]

Sorry, only now I remembered that we have already a case about this kind of issue: #146

[Tomek Gryszkiewicz]

Yes, but finally we've managed to deal with this without adding any options of config.

[Tomek Gryszkiewicz]

Finally, I went for drab-no-disable attribute. If present, Drab does not control of enable/disable state.