iPhone Go/Search keyboard submit not working on search form after selecting Datalist option

Question

For some reason I can't find any similar problems online. The form is structured like this answer suggests- Getting iPhone GO button to submit form

Here is the form-

<form id="searchForm" method="get" action="">
    <input type="search" placeholder="Search.." name="query" id="searchTerm" aria-label="Search" list="searchList" autocomplete="off" spellcheck="true">
    <datalist id="searchList">
        <option>Detroit Lions</option>
        <option>Detroit Pistons</option>
        <option>Detroit Red Wings</option>
        <option>Detroit Tigers</option>
    </datalist>
    <button type="submit" name="search" ></button>
</form>

When any option is selected and the input is updated with the new value, the iPhone keyboard submit does not work unless there is an additional key press before pressing the submit.

I was updating the datalist with javascript and thought that may be the issue but after hardcoding the above values the problem persists. Strangely sometimes the iPhone keyboard submit would work but I could not tell what the difference was.

I have tried changing autocomplete to on. I have tried putting an extra space after the option value. I have some ideas with javascript but would like suggestions before I spend too much time on the wrong approach.

iPhone version 12.4.1 and 14.4.1 and 14.7.1

*update- I tried implementing a javascript solution without success. The search/go submit only works if the user presses an additional key after selecting from the datalist. Using javascript to trigger a key press did not work. Iphone go/search works on other sites with datalists. Not sure what to try next.

Answer 1

Hey, below solution worked for me to make work the search button on the phone keyboard:

    <form id="searchForm" method="get" action="">
        <input type="search" placeholder="Search.." name="query" id="searchTerm" aria-label="Search" list="searchList" autocomplete="off" spellcheck="true">
        <datalist id="searchList">
            <option>Detroit Lions</option>
            <option>Detroit Pistons</option>
            <option>Detroit Red Wings</option>
            <option>Detroit Tigers</option>
        </datalist>
        <button type="submit" name="search" id="myBtn" ></button>
    </form>
.
.
.

<script>
var input = document.getElementById("searchTerm");
input.addEventListener("keyup", function(event) {
  if (event.keyCode === 13) {
   event.preventDefault();
   document.getElementById("myBtn").click();
  }
});
</script>

I added a js script at the end to trigger button click on enter and my search button on Iphone keyboard worked with the selected option on datalist.