CODEWITHSUNDEEP
javascripthtmljquerycss
Jason
Jason

Reputation: 95

on("blur") is not being called when clicking outside the element

I have a button that makes a div visible. When I click anywhere outside of the div there's a listener that should hide it again, but it's not being triggered. What I'm doing wrong, or are there better ways to do this?

$("#buttonNewIssue").on("click", function(e) {
  console.log("button new issue click");
  if ($("#newIssueMenu").hasClass("newIssueMenuHidden")) {
    $("#newIssueMenu").removeClass("newIssueMenuHidden");
    $("#newIssueMenu").addClass("newIssueMenuShown");
    $("#newIssueMenu").css("left", $(this).position().left);
    $("#newIssueMenu").css("top", $(this).outerHeight() + $(this).position().top);
    $("#newIssue").focus();
  } else {
    $("#newIssueMenu").removeClass("newIssueMenuShown");
    $("#newIssueMenu").addClass("newIssueMenuHidden");
  }
});

$("#newIssueMenu").on("blur", function(e) {
  console.log("newIssueMenu blur");
  $(this).removeClass("newIssueMenuShown");
  $(this).addClass("newIssueMenuHidden");
});
.newIssueMenuShown {
  z-index: 1;
  position: absolute;
  left: 0;
  top: 0;
  display: block;
  visibility: visible;
  transition-property: display, visibility;
  transition-duration: 0.4s;
}

.newIssueMenuHidden {
  display: none;
  visibility: hidden;
  transition: all 0.4s;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<button id="buttonNewIssue" type='button' data-toggle='popover' data-content='Create New Issue'>New Issue</button>
<div id="newIssueMenu" class="newIssueMenuHidden">
  <form><input id="newIssue" type="text" placeholder="Issue Name"></form>
</div>

Codepen: https://codepen.io/jasonws/pen/VwadjBY

Upvotes: 1

Views: 3595

Answers (1)

gaetanoM
gaetanoM

Reputation: 42054

You need to change the blur event with focusout event:

The focusout event fires when an element is about to lose focus. The main difference between this event and blur is that focusout bubbles while blur does not.

Working snippet:

$("#buttonNewIssue").on("click", function(e) {
    console.log("button new issue click");
    if ($("#newIssueMenu").hasClass("newIssueMenuHidden")) {
        $("#newIssueMenu").removeClass("newIssueMenuHidden");
        $("#newIssueMenu").addClass("newIssueMenuShown");
        $("#newIssueMenu").css("left", $(this).position().left);
        $("#newIssueMenu").css("top", $(this).outerHeight() + $(this).position().top);
        $("#newIssue").focus();
    } else {
        $("#newIssueMenu").removeClass("newIssueMenuShown");
        $("#newIssueMenu").addClass("newIssueMenuHidden");
    }
});

$("#newIssueMenu").on("focusout", function(e) {
    console.log("newIssueMenu blur");
    $(this).removeClass("newIssueMenuShown");
    $(this).addClass("newIssueMenuHidden");
});
.newIssueMenuShown {
    z-index: 1;
    position: absolute;
    left: 0;
    top: 0;
    display: block;
    visibility: visible;
    transition-property: display, visibility;
    transition-duration: 0.4s;
}

.newIssueMenuHidden {
    display: none;
    visibility: hidden;
    transition: all 0.4s;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>


<button id="buttonNewIssue" type='button' data-toggle='popover' data-content='Create New Issue'>New Issue</button>
<div id="newIssueMenu" class="newIssueMenuHidden">
    <form><input id="newIssue" type="text" placeholder="Issue Name"></form>
</div>

Upvotes: 2

Related Questions