Bug 256538

Summary: <option> elements do not render when <datalist> has style:"display: block"
Product: WebKit Reporter: Lordfate
Component: DOMAssignee: Nobody <webkit-unassigned>
Status: RESOLVED DUPLICATE    
Severity: Normal CC: akeerthi, annevk, karlcow, rniwa, webkit-bug-importer, zalan
Priority: P2 Keywords: BrowserCompat, InRadar
Version: WebKit Nightly Build   
Hardware: Unspecified   
OS: Unspecified   
URL: https://jsfiddle.net/b6y3qrLz/
See Also: https://bugs.webkit.org/show_bug.cgi?id=8351
Attachments:
Description Flags
rendering in safari, firefox, chrome none

Lordfate
Reported 2023-05-09 11:37:44 PDT
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.
Attachments
rendering in safari, firefox, chrome (366.83 KB, image/png)
2023-05-10 21:25 PDT, Karl Dubost 		no flags
Details
View All Add attachment proposed patch, testcase, etc.
Karl Dubost
Comment 1 2023-05-10 21:25:15 PDT
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?
Karl Dubost
Comment 2 2023-05-10 21:26:48 PDT
> 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
Karl Dubost
Comment 4 2023-05-14 20:57:08 PDT
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`
Karl Dubost
Comment 5 2023-05-14 22:19:51 PDT
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; } ```
Radar WebKit Bug Importer
Comment 6 2023-05-14 22:20:06 PDT
<rdar://problem/109337356>
Anne van Kesteren
Comment 7 2023-05-15 00:03:21 PDT
Duplicate of bug 169039?
Karl Dubost
Comment 8 2023-05-15 01:02:12 PDT
Duplicate of Bug 8351 I think :)
Karl Dubost
Comment 9 2023-05-15 01:02:20 PDT
*** This bug has been marked as a duplicate of bug 8351 ***
Note You need to log in before you can comment on or make changes to this bug.