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

Description Lordfate 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.
Comment 1 Karl Dubost 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?
Comment 2 Karl Dubost 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
Comment 4 Karl Dubost 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`
Comment 5 Karl Dubost 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; }
```
Comment 6 Radar WebKit Bug Importer 2023-05-14 22:20:06 PDT 
<rdar://problem/109337356>
Comment 7 Anne van Kesteren 2023-05-15 00:03:21 PDT 
Duplicate of bug 169039?
Comment 8 Karl Dubost 2023-05-15 01:02:12 PDT 
Duplicate of Bug 8351 
I think :)
Comment 9 Karl Dubost 2023-05-15 01:02:20 PDT 

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