If you create a simple datalist and set style: "display:block" you get a blank page and <option> elements are not rendered: https://jsfiddle.net/b6y3qrLz/ <div> <datalist style="display: block"> <option>First Option</option> <option>Second option</option> <option>Third option</option> </datalist> </div> WebKit/Safari/WKWebView result: Nothing Chrome, Android WebView (Chromium), Edge, Firefox, Electron result: First Option Second option Third option This issue is distinct from 252038 as my implementation does not include an <input> element at all. Including <input> does not alter the behavior.
Created attachment 466312 [details] rendering in safari, firefox, chrome Hi, Thanks for the heads up. I wonder what the spec is saying here. The datalist element is made to be a container for the input element, but not meant to be visible. The `display: block` on datalist will generate nothing once it is attached to `input`. ``` <label for="ice-cream-choice">Choose a flavor:</label> <input list="ice-cream-flavors" id="ice-cream-choice" name="ice-cream-choice"> <datalist id="ice-cream-flavors" style="display:block"> <option value="Chocolate"> <option value="Coconut"> <option value="Mint"> <option value="Strawberry"> <option value="Vanilla"> </datalist> ``` Should that be considered a bug in Chrome and Firefox instead? Do you have a specific case where it needs to be visible?
> The datalist element represents a set of option elements that represent predefined options for other controls. In the rendering, the datalist element represents nothing and it, along with its children, should be hidden. — https://html.spec.whatwg.org/multipage/form-elements.html#the-datalist-element
I reported it on https://bugs.chromium.org/p/chromium/issues/detail?id=1444633 https://bugzilla.mozilla.org/show_bug.cgi?id=1832475
Chromium closed it as WONTFIX https://bugs.chromium.org/p/chromium/issues/detail?id=1444633#c5 WebKit html.css https://github.com/WebKit/WebKit/blob/b1992957c9f0a50a1ec6add28fbaf334a92e8246/Source/WebCore/css/html.css#L33-L37 ``` /* children of the <head> element all have display:none as below */ area, base, basefont, datalist, head, link, meta, noembed, noframes, param, rp, script, style, template, title { display: none; } ``` I wonder why this is not rendered with a simple `display: block`
So Alan shared with me the culprit. https://searchfox.org/wubkat/rev/c4edc10959902651c35cf3cc5e911c757513058e/Source/WebCore/html/HTMLOptionElement.h#75 where ``` bool rendererIsNeeded(const RenderStyle&) final { return false; } ```
<rdar://problem/109337356>
Duplicate of bug 169039?
Duplicate of Bug 8351 I think :)
*** This bug has been marked as a duplicate of bug 8351 ***