How to handle click on Bulma's dropdown component?

I'm using bulma in an application and I have a dropdown as follows:

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.4/css/bulma.css">
<div class="dropdown">
  <div class="dropdown-trigger">
    <button class="button" 
onclick="javascript:document.querySelector('.dropdown').classList.toggle('is-active')" 
onblur="javascript:document.querySelector('.dropdown').classList.toggle('is-active')" aria-haspopup="true" aria-controls="dropdown-menu">
      <span>Dropdown button</span>
      <span class="icon is-small">
        <i class="fas fa-angle-down" aria-hidden="true"></i>
      </span>
    </button>
  </div>
  <div class="dropdown-menu" id="dropdown-menu" role="menu">
    <div class="dropdown-content">
      <a href="#" onclick="javascript:alert('clicked')" class="dropdown-item">
        Dropdown item
      </a>
      <a class="dropdown-item" onclick="javascript:alert('clicked')">
        Other dropdown item
      </a>
      <a href="#" onclick="javascript:alert('clicked')" class="dropdown-item is-active">
        Active dropdown item
      </a>
      <a href="#" onclick="javascript:alert('clicked')" class="dropdown-item">
        Other dropdown item
      </a>
      <hr class="dropdown-divider">
      <a href="#" onclick="javascript:alert('clicked')" class="dropdown-item">
        With a divider
      </a>
    </div>
  </div>
</div>

I have the onblur event handler so it will close the dropdown when the user clicks outside of it, but then when the user clicks one of the items from the dropdown the blur event gets triggered and the onclick from the item doesn't. How should I handle this?

Solution

The click event is triggered the moment you click and release. You can use a onmousedown event instead so that you get to click the item before the blur get triggered:

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.4/css/bulma.css">
<div class="dropdown">
  <div class="dropdown-trigger">
    <button class="button" 
onclick="javascript:document.querySelector('.dropdown').classList.toggle('is-active')" 
onblur="javascript:document.querySelector('.dropdown').classList.toggle('is-active')" aria-haspopup="true" aria-controls="dropdown-menu">
      <span>Dropdown button</span>
      <span class="icon is-small">
        <i class="fas fa-angle-down" aria-hidden="true"></i>
      </span>
    </button>
  </div>
  <div class="dropdown-menu" id="dropdown-menu" role="menu">
    <div class="dropdown-content">
      <a href="#" onmousedown="javascript:alert('clicked')" class="dropdown-item">
        Dropdown item
      </a>
      <a class="dropdown-item" onmousedown="javascript:alert('clicked')">
        Other dropdown item
      </a>
      <a href="#" onmousedown="javascript:alert('clicked')" class="dropdown-item is-active">
        Active dropdown item
      </a>
      <a href="#" onmousedown="javascript:alert('clicked')" class="dropdown-item">
        Other dropdown item
      </a>
      <hr class="dropdown-divider">
      <a href="#" onmousedown="javascript:alert('clicked')" class="dropdown-item">
        With a divider
      </a>
    </div>
  </div>
</div>

Of course the above is assuming that you would want to close the dropdown the moment you click on one of the menu items.