Is there a way to let form actions trigger when a typed search query partially, or fully matches any of the input datalist entries on iOS/Webkit?

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:

Safari shows datalist entries foo, bar and baz

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

partial match triggers form action

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.

search not working with fo query

search not working with foo query

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

dropdown selected works

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.

unmatch type works

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!

Leave a Comment