mouseleave is triggered on <select> when the cursor moves to the options inside in Firefox

user_13970410 0
Viewed 118

I have 2 <select> inside a hidden <div> which is revealed by a hover function in jQuery. The problem is that once the <div> is visible, if I click on any of the <select>s and move the cursor to the options inside, they collapse this <div> making it impossible to interact with them. This is an issue that I've been experiencing only in Firefox.

If anyone can give me a clue of what's causing the problem that'd be greatly appreciated.

<div id="tester-container">

  <div class="options-container">

    <select id="tester-fs">
      <option value="1">Option 1</option>
      <option value="2">Option 2</option>
      <option value="3" selected>Option 3</option>
    </select>

    <select id="tester-align">
      <option value="left" selected>Left</option>
      <option value="center">Center</option>
      <option value="right">Right</option>
    </select>

  </div>

  <div class="font-tester">
    <div style="font-size: 80px;">hover here</div>
  </div>

</div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script>
  $(document).ready(function() {
    $(".options-container").hide();
  });

  $('#tester-container').hover(mouseEnter, mouseLeave);

  function mouseEnter() {
    $(".options-container").show(200);
  };

  function mouseLeave() {
    $(".options-container").hide(200);
  };
</script>

html jquery
1 Answers

This is the reported issue in firefox. However I have made few changes on mouseleave event and also have updated the functions and now it will work fine on any browser also in firefox.

$(document).ready(function() {
  $(".options-container").hide();
});


$('#tester-container').mouseenter(function() {
  $('.options-container').show(200);
});


$('#tester-container').on('mouseleave', function(event) {
  if ($('.options-container').has(event.target).length > 0) {
    event.stopPropagation();
    return;
  } else {
    $('.options-container').hide(200);
  }
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="tester-container">


  <div class="options-container">

    <select id="tester-fs">
      <option value="1">Option 1</option>
      <option value="2">Option 2</option>
      <option value="3" selected>Option 3</option>
    </select>

    <select id="tester-align">
      <option value="left" selected>Left</option>
      <option value="center">Center</option>
      <option value="right">Right</option>
    </select>

  </div>

  <div class="font-tester">
    <div style="font-size: 80px;">hover here</div>
  </div>

</div>

user_109214370
Related