Bug 305091 – <datalist> option label text ignored when value is present

• Status: CLOSED
• Resolution: DUPLICATE
• Component: Forms

When both value and label (or text content) are provided on <option> elements inside a <datalist>, iOS Safari only displays the value in the suggestion UI, completely ignoring the label text.

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 entirely, despite identical markup. This creates a cross-platform inconsistency and reduces clarity for users.

Example:

<input list="countries" placeholder="Country" autocomplete="off">

<datalist id="countries">
  <option value="US">United States</option>
  <option value="DE">Germany</option>
  <option value="JP">Japan</option>
</datalist>


Observed behavior:

Only the value (e.g., US) is shown in the suggestions dropdown and predictive text bar.
The label (United States) is never displayed.

Expected behavior:

Both value and label are shown, as on macOS Safari and other browsers.
Autofill searches both value and label
Selecting the suggestion inserts the value into the input while clearly presenting the label to the user.

[Alexey Proskuryakov]

Created attachment 477935 [details]
test case

Same test as an attachment.

[Alexey Proskuryakov]

This was fixed in iOS 26, duping to the issue where this was implemented.

Testing, this, I'm not sure if I understand the logic for what shows up in the predictive text bar, that may still be buggy. It would be better to have a focused bug report about that if so, not to reuse this one.

*** This bug has been marked as a duplicate of bug 289668 ***

Created attachment 478029 [details]
Extended Test Case

Comment on attachment 478029 [details]
Extended Test Case

<pre>1. <code>&lt;option value="N"&gt;&lt;/option&gt;</code></pre>
<input list="numbers-1" placeholder="Number" autocomplete="off">

<datalist id="numbers-1">
  <option value="1"></option>
  <option value="2"></option>
  <option value="3"></option>
</datalist>


<pre>2. <code>&lt;option&gt;N&lt;/option&gt;</code></pre>
<input list="numbers-2" placeholder="Number" autocomplete="off">

<datalist id="numbers-2">
  <option>1</option>
  <option>2</option>
  <option>3</option>
</datalist>


<pre>3. <code>&lt;option value="N"&gt;Number&lt;/option&gt;</code></pre>
<input list="numbers-3" placeholder="Number" autocomplete="off">

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


<pre>4. <code>&lt;option value="N" label="Number"&gt;&lt;/option&gt;</code></pre>
<input list="numbers-4" placeholder="Number" autocomplete="off">

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

Comment on attachment 478029 [details]
Extended Test Case

><form autocomplete="off">
><pre>1. <code>&lt;option value="XX"&gt;&lt;/option&gt;</code></pre>
><input list="countries-1" placeholder="Countries" autocomplete="off">
>
><datalist id="countries-1">
>  <option value="US"></option>
>  <option value="DE"></option>
>  <option value="JP"></option>
></datalist>
>
>
><pre>2. <code>&lt;option&gt;XX&lt;/option&gt;</code></pre>
><input list="countries-2" placeholder="Countries" autocomplete="off">
>
><datalist id="countries-2">
>  <option>US</option>
>  <option>DE</option>
>  <option>JP</option>
></datalist>
>
>
><pre>3. <code>&lt;option value="XX"&gt;Country&lt;/option&gt;</code></pre>
><input list="countries-3" placeholder="Countries" autocomplete="off">
>
><datalist id="countries-3">
>  <option value="US">United States</option>
>  <option value="DE">Germany</option>
>  <option value="JP">Japan</option>
></datalist>
>
>
><pre>4. <code>&lt;option value="XX" label="Country"&gt;&lt;/option&gt;</code></pre>
><input list="countries-4" placeholder="Countries" autocomplete="off">
>
><datalist id="countries-4">
>  <option value="US" label="United States"></option>
>  <option value="DE" label="Germany"></option>
>  <option value="JP" label="Japan"></option>
></datalist>
></form>
>
>
><pre>5. <code>&lt;option value="XX" label="Country"&gt;Continent&lt;/option&gt;</code></pre>
><input list="countries-5" placeholder="Countries" autocomplete="off">
>
><datalist id="countries-5">
>  <option value="US" label="United States">North America</option>
>  <option value="DE" label="Germany">Europe</option>
>  <option value="JP" label="Japan">Asia</option>
></datalist>
></form>

Comment on attachment 478029 [details]
Extended Test Case

><form autocomplete="off">
><pre>1. <code>&lt;option value="XX"&gt;&lt;/option&gt;</code></pre>
><input list="countries-1" placeholder="Countries" autocomplete="off">
>
><datalist id="countries-1">
>  <option value="US"></option>
>  <option value="DE"></option>
>  <option value="JP"></option>
></datalist>
>
>
><pre>2. <code>&lt;option&gt;XX&lt;/option&gt;</code></pre>
><input list="countries-2" placeholder="Countries" autocomplete="off">
>
><datalist id="countries-2">
>  <option>US</option>
>  <option>DE</option>
>  <option>JP</option>
></datalist>
>
>
><pre>3. <code>&lt;option value="XX"&gt;Country&lt;/option&gt;</code></pre>
><input list="countries-3" placeholder="Countries" autocomplete="off">
>
><datalist id="countries-3">
>  <option value="US">United States</option>
>  <option value="DE">Germany</option>
>  <option value="JP">Japan</option>
></datalist>
>
>
><pre>4. <code>&lt;option value="XX" label="Country"&gt;&lt;/option&gt;</code></pre>
><input list="countries-4" placeholder="Countries" autocomplete="off">
>
><datalist id="countries-4">
>  <option value="US" label="United States"></option>
>  <option value="DE" label="Germany"></option>
>  <option value="JP" label="Japan"></option>
></datalist>
></form>
>
>
><pre>5. <code>&lt;option value="XX" label="Country"&gt;Continent&lt;/option&gt;</code></pre>
><input list="countries-5" placeholder="Countries" autocomplete="off">
>
><datalist id="countries-5">
>  <option value="US" label="United States">North America</option>
>  <option value="DE" label="Germany">Europe</option>
>  <option value="JP" label="Japan">Asia</option>
></datalist>
></form>

Comment on attachment 478029 [details]
Extended Test Case

><pre>1. <code>&lt;option value="N"&gt;&lt;/option&gt;</code></pre>
><input list="numbers-1" placeholder="Number" autocomplete="off">
>
><datalist id="numbers-1">
>  <option value="1"></option>
>  <option value="2"></option>
>  <option value="3"></option>
></datalist>
>
>
><pre>2. <code>&lt;option&gt;N&lt;/option&gt;</code></pre>
><input list="numbers-2" placeholder="Number" autocomplete="off">
>
><datalist id="numbers-2">
>  <option>1</option>
>  <option>2</option>
>  <option>3</option>
></datalist>
>
>
><pre>3. <code>&lt;option value="N"&gt;Number&lt;/option&gt;</code></pre>
><input list="numbers-3" placeholder="Number" autocomplete="off">
>
><datalist id="numbers-3">
>  <option value="1">One</option>
>  <option value="2">Two</option>
>  <option value="3">Three</option>
></datalist>
>
>
><pre>4. <code>&lt;option value="N" label="Number"&gt;&lt;/option&gt;</code></pre>
><input list="numbers-4" placeholder="Number" autocomplete="off">
>
><datalist id="numbers-4">
>  <option value="1" label="One"></option>
>  <option value="2" label="Two"></option>
>  <option value="3" label="Three"></option>
></datalist>

Created attachment 478035 [details]
Number test case

Apologies for the spam, did not know how to edit an attachment