Bug 305598 – <datalist> suggestions ignore <option> label when matching input

• Component: Forms
• Status: NEW

Created attachment 478038 [details]
test case

When entering text in an <input> with an associated <datalist>, the predictive text bar and the suggestions dropdown do not consider the <option> label/textContent when matching the input (only the value)

According to the HTML specification section 4.10.5.3.9:

“If appropriate, the user agent should use the suggestion’s label and value to identify the suggestion to the user.”

WebKit already uses both label and value on macOS Safari, but iOS Safari ignores the label when determining which options to suggest. This creates a cross-platform inconsistency and reduces clarity for users.

Example:
<input list="numbers" placeholder="Number" autocomplete="off">

<datalist id="numbers">
    <option value="1">One</option>
    <option value="2">Two</option>
    <option value="3">Three</option>
    <option value="4">Four</option>
</datalist>

Observed behavior:
- Only the value (e.g., 1, 2, 3) is used to determine the suggestions in the dropdown and predictive text bar.
- Only the value is not shown in the predictive text bar

Expected behavior:
- Autofill searches both value and label
- If possible, both value and label are shown in the predictive text bar

[Alexey Proskuryakov]

Thank you for the report! I'm not sure if "ignores the label when determining which options to suggest" precisely matches what I observed when trying this out, but what happened seemed difficult to explain, so there is likely a bug here.

For the attached test case, if you type 'o', it causes the dropdown to not open (no options), and the predictive text bar shows |   1   |   2   |   3   |
but I would expect the dropdown to show 1 (One), 2 (Two), 4 (Four), and the predictive text bar would update to |   1   |   2   |   4   |

[Radar WebKit Bug Importer]

<rdar://problem/168703889>