Close dropdown on clicking outside

close-dropdown-on-click-outside.html

<fieldset class="filtersDropdown">
  <div class="filtersDropdownTrigger">
    Dropdown trigger
    <div class="caret pointer-events-none">
      <svg class="pointer-events-none"><use xlink:href="#icon-angle-down"></use></svg>
    </div>
  </div>
  <div class="dropdown-body"></div>
</fieldset>

<script>
  var filtersDropdown = $('.filtersDropdown');
  filtersDropdown.each(function() {
    let $this = $(this);
    let trigger = $this.find('.filtersDropdownTrigger');
    document.addEventListener('click', (event) => {
      let withinBoundaries = event.composedPath().includes($this[0]);
      if (withinBoundaries) {
        if (event.target == trigger[0] && $this.hasClass('is-open')) {
          $this.removeClass('is-open');
        } else {
          $this.addClass('is-open');
        }
      } else {
        $this.removeClass('is-open');
      }
    });
  });  
</script>