checkbox not working correctly with "on blur"-CodePudding

I have created a multiselect dropdown, and using "on blur" event but am unable to click on checkbox because when I click on checkbox it's hiding it's list. how to solve that.

$('.select-text-box').on('click', function() {
  $(".mylist").fadeIn(300, function() {
    $(this).focus();
  });
});

$(".mylist").on('blur', function() {
  $(this).hide()
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>
<div class="select-text-box" style="background-color: red; padding:20px; width:150px; border-radius: 20px;">Please Select</div>

<div class="mylist" style="display: none; height: 200px; width:300px; background:red;" tabindex="-1">
  <ul>
    <input type="checkbox" name="">name
    <input type="checkbox" name="">class
  </ul>
</div>

CodePudding user response：

The issue is because the blur event will always fire when you click any other element than the .mylist that it's bound to.

A better approach to fix this issue is to bind an event handler to the document directly. If the element which triggered the click event does not have the .mylist class, and is not a child of .mylist, then hide the list.

Note that you'll also need to call stopPropagation() in the event handler for the .select-text-box which shows the list in order for the event to not be caught and immediately hide the list again.

let $list = $(".mylist");
let $dropdown = $('.select-text-box').on('click', e => {
  e.stopPropagation();
  $list.fadeToggle(300);
});

$(document).on('click', e => {
  let $target = $(e.target);
  if (!$target.hasClass('myList') && $target.closest('.mylist').length == 0)
    $list.fadeOut(300);
});

.select-text-box {
  background-color: red;
  padding: 20px;
  width: 150px;
  border-radius: 20px;
}

.mylist {
  display: none;
  height: 200px;
  width: 300px;
  background: red;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>
<div class="select-text-box">Please Select</div>
<div class="mylist" tabindex="-1">
  <ul>
    <label>
      <input type="checkbox" name="">
      Name
    </label>
    <label>
      <input type="checkbox" name="">
      Class
    </label>
  </ul>
</div>

CodePudding user response：

Here you are focusing the div with class mylist. You do not typically focus div elements, more useful on form elements, links, etc..

  $(".mylist").fadeIn(300, function() {
    $(this).focus();
  });

This hides the div once it is not focused anymore, which appens when you click an option.

$(".mylist").on('blur', function() {
  $(this).hide()
});

You have to keep the selection box open until someone makes their choice. Maybe put a close button there?

$('.select-text-box').on('click', function() {
  $(".mylist").fadeIn(300, function() {
    $(this).focus();
  });
});

$(".close").on('click', function() {
  $('.mylist').hide();
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>
<div class="select-text-box" style="background-color: red; padding:20px; width:150px; border-radius: 20px;">Please Select</div>

<div class="mylist" style="display: none; padding: 5px; height: 200px; width:300px; background:red;" tabindex="-1">
  <ul>
    <input type="checkbox" name="">name
    <input type="checkbox" name="">class
  </ul>
  <button class="close">Confirm</button>
</div>