Keep Sidebar Open if Clicked in Input Field

Question

When a user clicks on the logo, the sidebar opens; when they click on the menu or body, the sidemenu closes, however there is one exception I'm trying to figure out. If you click in the input field within the sidemenu, the menu closes. I would like the sidemenu to stay open when the user is click in the input field. Below is the jsfiddle and js.

jsFiddle

  $("#menu-close").click(function(e) {
   e.stopPropagation();
   $("#sidebar-wrapper").toggleClass("active");
});

$("#menu-toggle").click(function(e) {
   e.stopPropagation();
   $("#sidebar-wrapper").toggleClass("active");
});

$(document).click(function(){
   if($("#sidebar-wrapper").hasClass('active')){
      $("#sidebar-wrapper").removeClass("active");
   }
});

Answer 1

Try this.

$("#menu-close").click(function(e) {
   e.stopPropagation();
   $("#sidebar-wrapper").toggleClass("active");
});

// Stop propagation for sidebar-wrapper to stop closing the sidebar panel
$('#sidebar-wrapper').click(function(e){
   e.stopPropagation();
})
$("#menu-toggle").click(function(e) {
    e.stopPropagation();
   $("#sidebar-wrapper").toggleClass("active");
});
$(document).click(function(){
   if($("#sidebar-wrapper").hasClass('active')){
      $("#sidebar-wrapper").removeClass("active");
   }
});

Update Fiddle

Answer 2

Try this

  $("#menu-close").click(function(e) {
   e.stopPropagation();
   $("#sidebar-wrapper").toggleClass("active");
});
$("#menu-toggle").click(function(e) {
   e.stopPropagation();
   $("#sidebar-wrapper").toggleClass("active");
});
$(document).click(function(e){
   if($('#sidebar-wrapper').has(e.target).length === 0){
       if($("#sidebar-wrapper").hasClass('active')){
          $("#sidebar-wrapper").removeClass("active");
       }
   }
});

DEMO