Need to fire an event when a select menu closes or hides (disappears from view). Which event can I latch on to, to accomplish this?

Question

Issue:

I have the following dropdown select menu. I am able to fire event onChange or onBlur. But I want to be able to fire an event immediately when the menu closes and not for anything else. How can I latch on to that?

current implementation

The blur works, but the event doesn't fire until I actually click somewhere other than select input field. I need it to fire when the options menu disappears from view

$("select").on("blur", function(event) {
  let id = $(this).attr("id");
  console.log(id);
  //validate.validateInput(this);
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select class="form-control" id="patient_registration-patient-province">
  <option class="trn" disabled="" selected="" value="" data-trn-key="select a province">select a province</option>
  <option value="Alberta">Alberta</option>
  <option value="British Columbia">British Columbia</option>
  <option value="Manitoba">Manitoba</option>
  <option value="New Brunswick">New Brunswick</option>
  <option value="Newfoundland">Newfoundland and Labrador</option>
  <option value="Northwest Territories">Northwest Territories</option>
  <option value="Nova Scotia">Nova Scotia</option>
  <option value="Nunavut">Nunavut</option>
  <option value="Ontario">Ontario</option>
  <option value="Prince Edward Island">Prince Edward Island</option>
  <option value="Quebec">Quebec</option>
  <option value="Saskatchewan">Saskatchewan</option>
  <option value="Yukon">Yukon</option>
</select>

change does not fire when the menu closes, it only fires if i select something — shan, Mar 22 '20 at 17:31
Unfortunately you are out of luck for the specific use case with the native `select` element. https://stackoverflow.com/questions/6207929/is-there-a-dom-event-that-fires-when-an-html-select-element-is-closed https://stackoverflow.com/questions/20321553/jquery-events-for-closing-and-opening-select-drop-down-and-not-on-change — Anurag Srivastava, Mar 22 '20 at 17:43

score 1 · Accepted Answer · 2020-03-22T20:53:59.797

Update:

$(document).click(function(event) {
  $target = $(event.target);
  
  if($("select").is(":focus") && !$target.closest('#select').length)
    console.log("click outside");
});

$("select").on("click", function(event) {
  console.log("click option");
})

//$("select").on("mouseleave", () => console.log("left"))

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select id="select" class="form-control" id="patient_registration-patient-province">
  <option class="trn" disabled="" selected="" value="" data-trn-key="select a province">select a province</option>
  <option value="Alberta">Alberta</option>
  <option value="British Columbia">British Columbia</option>
  <option value="Manitoba">Manitoba</option>
  <option value="New Brunswick">New Brunswick</option>
  <option value="Newfoundland">Newfoundland and Labrador</option>
  <option value="Northwest Territories">Northwest Territories</option>
  <option value="Nova Scotia">Nova Scotia</option>
  <option value="Nunavut">Nunavut</option>
  <option value="Ontario">Ontario</option>
  <option value="Prince Edward Island">Prince Edward Island</option>
  <option value="Quebec">Quebec</option>
  <option value="Saskatchewan">Saskatchewan</option>
  <option value="Yukon">Yukon</option>
</select>

Doesn't fire without selecting anything, then fires on every click whether to show or hide the options. — Anurag Srivastava, Mar 22 '20 at 17:45

score 0 · Answer 2 · answered Mar 22 '20 at 18:01

You can try this

$(function(){
  var closed = false;
  $("select").on("blur", function(event) {
    if(!closed){
      doOnClose($(this));
    }
  });
  $("select").on("change", function(event) {
    if(!closed){
      doOnClose($(this));
    }
  });
  $("select").on("focus", function(event) {
    closed = false;
  });

  /* do what you need to on close the dropdown menu*/
  function doOnClose(e){
    let id = $(e).attr("id");
    console.log(id);
    closed = true;
  }
})

hope this will work

score 0 · Answer 3 · answered Mar 22 '20 at 18:14

Since you are using jQuery you could use the library select2 https://select2.org/programmatic-control/events it offers (for your case)

select2:closing     Triggered before the dropdown is closed. This event can be prevented.
select2:close   Triggered whenever the dropdown is closed. select2:closing is fired before this and can be prevented.

If this is to "heavy" just look into the code how this works.

Need to fire an event when a select menu closes or hides (disappears from view). Which event can I latch on to, to accomplish this?

3 Answers3