Button behaves differently on Chrome and Firefox

Question

I am trying to do a toggle button for the search bar. If the user clicks on the button for the first time, the search bar appears. If the user clicks the second time, and if there is a value (the user has typed) then submit the form. Else, if the user clicks outside the bar, it closes.

I finished the code for this, and it works fine on Firefox, however it doesn't work on Chrome and Microsoft Edge:

• On Firefox, when you click on different regions of the button, it behaves the same (opens the search bar)
• On Chrome and ME, when you click near the bounds of the button, it opens the search bar, but when you click near the center, it doesn't

I tried to log something when the event click is fired, everything works fine, but the actual result is not that good.

 var _sbmButton = document.getElementsByClassName('eti-srch-sbm')[0], _input = _sbmButton.etiFindSiblings('eti-frm-t-s')[0], _frmAction = _input.parentElement.parentElement, _logo = document.getElementsByClassName('eti-logo')[0], click = 0; _sbmButton.addEventListener('click', function(evt) { click++; _nav.classList.add('nav-hide'); _logo.classList.add('logo-hide'); _frmAction.classList.add('frm-show'); _input.focus(); if (_input.value !== '' && _frmAction.classList.contains('frm-show') && click > 1) { _frmAction.children[0].submit(); //Check if the searchbar has been opened and the input !== '' } else { evt.preventDefault(); //Else stop submitting the form } }, false); document.addEventListener('click', function(evt) { var target = evt.target || evt.srcElement; if (target !== _input && target !== _sbmButton) { //Check click outside click = 0; _nav.classList.remove('nav-hide'); _logo.classList.remove('logo-hide'); _frmAction.classList.remove('frm-show'); } }); 

 .eti-srch-sbm { position: absolute; right: 1px; top: 1px; background-color: transparent; font-size: 18px; width: 30px; height: calc(100% - 2px); } 

 <form name="search-top" method="get" class="eti-frm-t" action="search"> <input class="eti-frm-ts" type="text" name="q" placeholder="Search..." autocomplete="off"> <button class="eti-srch-sbm"><i class="fa fa-search"></i></button> </form> 

Answer 1

The icon is blocking the click. Add pointer-events:none to the styles to have clicks "pass through" to the button.

The CSS

.eti-srch-sbm .fa{
  pointer-events:none;
}