checkbox not working correctly with "on blur"

Question

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>

score 1 · Accepted Answer · answered Sep 28 '21 at 13:23

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>

your es6 code working fine in html document, but in aspx it's showing error lines, can you give me this in jquery ? — atul245, Sep 28 '21 at 14:01
The code is using jQuery. To convert the arrow functions to standard functions change `e => {` to `function(e) {`. Also note that assuming you're referring to the linter in Visual Studio, this won't prevent the code from working, and you can update it to one that supports ES6 quite easily. — Rory McCrossan, Sep 28 '21 at 17:48

score 0 · Answer 2 · answered Sep 28 '21 at 13:13

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>

but now "mylist" not hiding when clicking on outside, I need to hide "mylist" when click on outside. that's why I used "on blur". — atul245, Sep 28 '21 at 13:22
If you wanted that you could have said so before : ) You can find solutions for that here on SO. Search for 'close menu when clicking outside'. One example here: [Close menu when clicking outside](https://stackoverflow.com/questions/59444899/close-toggle-menu-after-clicking-outside-of-it-and-on-a-link) — Peter Krebs, Sep 28 '21 at 13:29

checkbox not working correctly with "on blur"

2 Answers2