Doesn't work on iOS when nesting the elements within the label element

It doesn’t work properly on iOS when nesting the elements within the label element.

This is the code

<label for="text-field">
  From <span aria-hidden="true">*</span>
  <input id="text-field" type="text" class="" placeholder="Departure airport" value="" list="airports" required aria-required="true">
  <datalist id="airports" title="Choose an aiport">
      <option value="Bologna, Guglielmo Marconi [BLQ] (ITALIA)">
      <option value="Dubai, Al Maktoum Intl [DWC] (EMIRATI ARABI)">
      <option value="Roma, Fiumicino [FCO] (ITALIA)">
      <option value="New York Ny, John F Kennedy Intl [JFK] (STATI UNITI)">
      <option value="Parigi, Charles De Gaulle [CDG] (FRANCIA)">
      <option value="Berlino, Schoenefeld [SXF] (GERMANIA)">
      <option value="Londra, Heathrow [LHR] (REGNO UNITO)">
  </datalist>
</label>

I noticed that the select appears behind the keyboard, but if I put the datalist out of label it works. Ok I tried to modify the markup also on the demo page and I confirm you that if datalist is inside label (and for my needs I have to do in this way), it doesn’t work.

Any suggestions?

JS Bin: https://output.jsbin.com/solopuq

_Originally posted by @acespace90 in https://github.com/mfranzke/datalist-polyfill/issues/43#issuecomment-431312871_

[mfranzke]

@acespace90, what I meant by my previous post was that the label shouldn’t include the datalist element in general (and from my perspective even also it doesn’t need to include input elements, but that’s another discussion).

Even on the „simple“ solution (and not using my polyfill at all) provided within the W3C specs to wrap the option elements within the datalist by a select you would face the same issue that you’ve reported on iOS - so this is what I wanted to reflect by providing their HTML code within that JSbin: https://jsbin.com/fegojipiqi/1/edit?html The reason why is that „interactive content“ shouldn’t be placed into label elements, compare to https://developer.mozilla.org/en-US/docs/Web/HTML/Element/label#Interactive_content

This would be a working JSBin with the datalist outside of the label element: https://jsbin.com/cufelutulo/edit?html

[mfranzke]

Mentioned the aspect of not to include the datalist within the label within the readme file.