My Search Box seems to not like my overlay

Question

Page in question: https://www.harpercollege.edu/library/index.php

I have a site that I'm creating a new mobile navigation for, and everything is working great except for the search input field. The Search button causes no issues but the input box triggers the overlay to toggle closed. I've tried working with the Z-Index value thinking that was the cause but it had no effect. It was working correctly at one point and when I went back to styling the overlay its now broken.

Also - This overlay only shows-up at a width of 900px or less.

$(document).ready(function() {
  $(".button a").click(function() {
    $(".overlay").fadeToggle(200);
    $(this).toggleClass('btn-open').toggleClass('btn-close');
  });
});
$('.overlay').on('click', function() {
  $(".overlay").fadeToggle(200);
  $(".button a").toggleClass('btn-open').toggleClass('btn-close');
  open = false;
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="overlay" style="display: block;">
  <div class="wrap">
    <div class="search-box-mobile">
      <form id="cse-search-box" class="navbar-search" action="https://www.harpercollege.edu/search/index.php" method="get" enctype="application/x-www-form-urlencoded" role="search">
        <label class="sr-only" for="q">Search</label>
        <input id="q" class="search-query" title="Search Harper College" placeholder="Search Harper College" type="text" name="q"><button type="submit" class="btn btn-default">
                        	<span class="fa fa-search"></span></button>
      </form>
    </div>
    <ul class="wrap-nav">
      <li><a href="#">Quick Links</a>
        <ul>
          <li><a href="/index.php">Home</a></li>
          <li><a href="https://myharper.harpercollege.edu">MyHarper</a></li>
          <li><a href="https://harper.blackboard.com/webapps/login/">Blackboard</a></li>
          <li><a href="http://events.harpercollege.edu/">Calendar</a></li>
          <li><a href="http://dept.harpercollege.edu/library/">Library</a></li>
          <li><a href="https://hip.harpercollege.edu/">Faculty &amp; Staff</a></li>
          <li><a href="/about/contactus.php">Contact Us</a></li>
        </ul>
      </li>
      <li><a href="/library/services/index.php">Services</a>
        <ul>
          <li><a href="/library/services/plagiarism.php">Plagiarism</a></li>
          <li><a href="/library/services/forms/index.php">Forms</a>
          </li>
          <li><a href="/library/services/workshops.php">Workshops</a></li>
          <li><a href="/library/services/tutorials.php">Tutorials</a></li>
          <li><a href="/library/services/copyright.php">Copyright &amp; Fair Use</a></li>
          <li><a href="/library/services/faculty/index.php">Faculty &amp; Staff</a></li>
          <li><a href="/library/services/district-borrowers.php">District Residents</a></li>
        </ul>
      </li>
      <li><a href="/library/research/index.php">RESEARCH</a>
        <ul>
          <li><a href="https://vufind.carli.illinois.edu/vf-wrh/">Catalog</a></li>
          <li><a href="http://libguides.harpercollege.edu/az.php">Databases</a></li>
          <li><a href="http://libguides.harpercollege.edu/srch.php">Research Guides</a></li>
          <li><a href="/library/research/other-libraries.php">Other Libraries</a></li>
        </ul>
      </li>
      <li><a href="/library/faqs/index.php">FAQS</a></li>
      <li><a href="/library/archives/index.php">ARCHIVES</a>
        <ul>
          <li><a href="/library/archives/donate.php">Archive Donation Form</a></li>
        </ul>
      </li>
      <li><a href="/library/about/index.php">ABOUT</a>
        <ul>
          <li><a href="/library/about/mission.php">Library Mission</a></li>
          <li><a href="/library/about/policies/index.php">Library Policies</a></li>
          <li><a href="/library/about/directory/index.php">Directory</a></li>
          <li><a href="/library/about/hours.php">Hours / Location</a></li>
          <li><a href="http://libguides.harpercollege.edu/LCCReadingRoom">LCC Reading Room</a></li>
        </ul>
      </li>
    </ul>
  </div>
</div>

Answer 1

This is your issue:

$(document).ready(function(){
    $(".button a").click(function(){
        $(".overlay").fadeToggle(200);
       $(this).toggleClass('btn-open').toggleClass('btn-close');
    });
});
$('.overlay').on('click', function(){
    $(".overlay").fadeToggle(200);   
    $(".button a").toggleClass('btn-open').toggleClass('btn-close');
    open = false;
});

It is activating every time you click on "button" so it is switching on and off regardless. If you can put this into a jsfiddle.net I will make a workaround for you.

Answer 2

you have this code in custom.min.js which is causing the overlay to close

$('.overlay').on('click', function(){
    $(".overlay").fadeToggle(200);   
    $(".button a").toggleClass('btn-open').toggleClass('btn-close');
    open = false;
});

Click event from the input bubbles up and is handled from this handler. You can try looking at what element was clicket through event.target or you can change the functionality of closing the overlay.

Note: I found the above code by creating a DOM breakpoint to your overlay (break on -> attribute modifications)

Answer 3

You have a jQuery event handler for any click inside of the overlay:

$('.overlay').on('click', function(){
    $(".overlay").fadeToggle(200);   
    $(".button a").toggleClass('btn-open').toggleClass('btn-close');
    open = false;
});

Since the input box is inside of .overlay, the click event will bubble up to that handler. If you don't want that to happen, you'll need to either have an event handler for the input box click that cancels the event propagation or check the target of the event in the click handler. Here's how to do the latter:

$('.overlay').on('click', function(e) {
    if (e.target.tagName.toLowerCase() === 'input') {
      return;
    }

    $(".overlay").fadeToggle(200);   
    $(".button a").toggleClass('btn-open').toggleClass('btn-close');
    open = false;
});