input container hide when click on mobile view

Question

below is my snippet.

$(document).ready(function(){
  $(".thehide").hide();
 $(document).mouseup(function (e) {
        var container = $(".filter_sub");
        var s_box = $(".search_box");
        var export_container = $(".export_container");
        var calendar = $(".ui-datepicker");
        if (!container.is(e.target) && calendar.has(e.target).length === 0 && container.has(e.target).length === 0 && s_box.has(e.target).length === 0 && export_container.has(e.target).length === 0) {
            container.stop(true).slideUp();
            s_box.fadeOut(200);
            export_container.fadeOut(200);
        }
    });
  
  $(".search_trigger_button").click(function(){
          if($(this).next(".search_box").is(":visible")){
              $(this).next(".search_box").fadeOut(200);
          }else{
              $(this).next(".search_box").css({ 'top' : $(this).position().top + 37 + 'px', 'left' : $(this).position().left - 70 + 'px' });
              $(this).next(".search_box").fadeIn(200);
          }
          
    });
    $(".search_box").click(function(e){
        e.stopPropagation();
    });
});

.search_box{
    display: table;
    position: absolute;
    z-index: 999;
    box-shadow: 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23);
    margin: 0px;
    top: 0px;
    left: 0px;
    overflow: auto;
    padding: 10px;
}
.searchbox_wrapper{margin: 10px auto 0px auto !important; display: table;}

<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.4.0/css/font-awesome.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css" rel="stylesheet"/>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>

<div class="searchbox_wrapper extend display_table center">

                    <button class="btn btn-default cosdata_searchbtn search_trigger_button extend clear"><i class="fa fa-search"></i></button>
                    <div class="search_box extend clear bgwhite padding_10px radius_3px thehide">
                        <div class="input-group">
                            <input type="text" class="form-control" placeholder="Search herex...">
                        </div><!-- /input-group -->
                    </div>
               </div>

everything works fine on desktop view like i can hide and show the searchbox and dont hide it when im on the input box (focus) , hide when click anywhere except for the the element that has a class of "search_box" but when i tried to input into the input box from the mobile (smartphone browsing), it suddenly close like the hide function is triggered which is, it should not because I set into the function that if the input box is on focus, the element that has a class of "search_box" will not be hidden. Any ideas, clues, help?