JSFiddle - React, Tailwind, and code Playground

by darshanags

HTML

<div class="outer" tabindex="0">
<button class="js-dropdown-trigger">Dropdown</button>
  <div class="inner">
    <div class="dropdown__item">
      Some random text with a <a href="#" class="stop-propagation" tabindex="0">link</a> in it.
    </div>
    <div class="dropdown__divider"></div>
    <div class="dropdown__item">
      <a href="#">Item One</a>
    </div>
    <div class="dropdown__item">
      <a href="#">Item Two</a>
    </div>
    <div class="dropdown__item">
      <a href="#">Item Three</a>
    </div>
  </div>
</div>

CSS

.outer {
  background: green;
}

.inner {
  background: yellow;
}

JavaScript

$('.outer').on('focusout', function() {
  console.log('focusout')
});

$('.outer').on('focusin', function() {
  console.log('focusin')
});