tabindex is given it is focusing but on enter key enter it won't work

Question

When I click on search icon with mouse it works fine , but when i use tab and focus goes to icon but when i enter "ENTER" keyword it won't work .

` <%-- Mobile Only - Search Icon --%>
 <div class="mobile-header-icon" onclick="OnClickSearchIcon();" tabindex="0" 
           aria-label="Search">
     <i class="search" ></i>
        </div>`

Answer 1

Pressing enter does not fire a click event.

You could add a listener for e.g. keyup event.

---

Here is a full working example:

function OnClickSearchIcon(){
  // do whatever you want instead of this
  document.body.innerHTML += "<p>Search!</p>";
}

function onKeyUp(e){
  if (e.key === "Enter") OnClickSearchIcon();
}

<div tabindex=0 onkeyup="onKeyUp(event)" onclick="OnClickSearchIcon()" >
  <i class="search" >Click, or focus me and press Enter</i>
</div>