Hide a popup on clicking outside the popup area

pascallaliberte · February 9, 2018, 1:49pm

Yep, you can use a data-action="click@window->controller-name#hide", like here:

pascallaliberte/stimulus-turbolinks-demo/blob/cd7fb5a04ca330d3fd5ec76ab468359376134986/_includes/header.html#L12


<a class="navbar-brand" href="{{ "/" | prepend: site.baseurl }}">Propos<strong>ahoy!</strong> ⚓️</a>


<ul class="navbar-nav mr-auto w-100">
  <li class="nav-item nav-item-proposals {% if page.section == "proposals" %}active{% endif %}">
    <a class="nav-link" href="{{ "/" | prepend: site.baseurl }}">Proposals {% if page.section == "proposals" %}<span class="sr-only">(current)</span>{% endif %}</a>
  </li>
  <li class="nav-item nav-item-clients {% if page.section == "clients" %}active{% endif %}">
    <a class="nav-link" href="{{ "/clients/" | prepend: site.baseurl }}">Clients {% if page.section == "proposals" %}<span class="sr-only">(current)</span>{% endif %}</a>
  </li>
  <li class="nav-item ml-auto dropdown" data-controller="dropdown">
    <a class="nav-link dropdown-toggle" data-action="click->dropdown#toggle click@window->dropdown#hide" data-target="dropdown.button" href="#" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
      Account
    </a>
    <div class="dropdown-menu" data-target="dropdown.menu">
      <a class="dropdown-item" href="#">Settings</a>
      <a class="dropdown-item" href="#">Help</a>
      <div class="dropdown-divider"></div>
      <a class="dropdown-item" href="#">Logout</a>
    </div>
  </li>
</ul>

Topic		Replies	Views
Best practices for handling clicks outside element	7	21049	October 13, 2021
Modal close if (click mousedown is inside modal & click mouseup is outside)	6	1465	July 9, 2023
How to use Stimulus inside Bootstrap's popovers?	3	5171	January 29, 2019
Stimulus-use: useClickOutside and useTransition	1	326	January 9, 2024
Stimulus has no focusout event trigger? not playing nice with bootstrap?	7	3222	May 3, 2022

Hide a popup on clicking outside the popup area

Related topics