drop down search hideout

hey! i make a drop down search in navigation bar ,based on materialize for wordpress :

<a href="#" data-activates="search-area" class="search-header dropdown-button">
<i class="material-icons">search</i>
</a> 
<div id="search-area" class="dropdown-content search-area">
<form method="get" id="searchform" action="<?php echo home_url(); ?>/">
 <div class="input-field">
<input class="search" type="text" name="s" id="s" value="<?php the_search_query(); ?>" placeholder="Search..." />
<label class="label-icon" for="search"><i class="search-ico material-icons">search</i></label>
</div>
</form>
</div>

and its works fine show search area and everything’s but the problem is when i click on input-type to type somthing drop down just fade out and i cant type anything.

[DanielRuf]

Sorry but I am just one of many contributors and I invest my available free time.

[BanShee8]

i just finde the problem and im gonna share it here:

You can manually add an event listener to the .dropdown-content element and prevent clicks from bubbling using e.preventDefault():

$('.dropdown-content').on('click', function(e) {
  e.stopPropagation();
});

its solve the problem thanks to stackoverflow from.