JSFiddle - React, Tailwind, and code Playground

by Vadim

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<select name="" id="" class="select"></select>

JavaScript

var select = $('.select')
select.on('click', onSelectClick)

function onSelectClick() {
  if(select.hasClass('active')) {
     deactivateSelect()
  } else {
    activateSelect()
  }
}

function onBodyClick(evt) {
  if(evt.target !== select[0]){
    deactivateSelect()
  }
}

function activateSelect(){
  select.addClass('active')
  document.body.addEventListener('click', onBodyClick)
}

function deactivateSelect(){
  select.removeClass('active')
  document.body.removeEventListener('click', onBodyClick)
}