Update your settings

I am trying to build a search feature for a React app. I have reduced its implementation to a minimal reproducible example. I think the problem I am encountering might be be a browser bug.

Consider the following React code:

function ProblematicForm() {
  const action = async (formData) => {
    // assume this is "use server". I _must_ extract the data from formData.
    // useState cannot be used to coordinate the value between this action and the input!
    alert(formData.get('search'))
  }

  return (
    <form action={action}>
      <input list="search" name="search" type="search" />
      <button type="submit">Search</button>
      <datalist id="search">
        <option value="foo" />
        <option value="bar" />
        <option value="baz" />
      </datalist>
    </form>
  )
}

On Safari (WebKit), the datalist correctly renders:

and typing out partial or full match of a member of the datalist, then hitting Enter causes the form action to trigger.

Now on iOS Chrome (also WebKit, latest version as of time of writing), typing out a partial or full match, then hitting the search button on the iOS keyboard, does not trigger the form action.

What does work is selecting (not typing!) a datalist entry from the dropdown box, then hitting search on the iOS keyboard:

Note that this fails when selecting the datalist suggestion that sits above the keyboard, which I assume is equivalent to typing out the datalist entry manually from an implementation perspective.

What also works is typing something that doesn't match anything at all from the datalist, then hitting the search button on the iOS keyboard.

So either this is:

1. An iOS specific WebKit bug
2. I have misconfigured my <input> and <datalist> tags to prohibit typed rather than selected matches

What I am asking is:

1. if the problem is 1., is there a workaround to address this that preserves reasonable HTML <form> semantics and affordances?
2. If the problem is 2., what do I do to fix my <form>?

Thanks!