RESOLVED FIXED 201768
Datalist option's label not used
https://bugs.webkit.org/show_bug.cgi?id=201768
Summary Datalist option's label not used
shrpne
Reported 2019-09-13 12:15:55 PDT
Option's `label` is not shown in datalist suggestions, only `value` is shown. However, spec suggests using both `value` and `label` https://html.spec.whatwg.org/multipage/input.html#attr-input-list Chrome follows the spec and shows both. Here you can find example datalist, where label "The color of the sky" is not used for value "blue". https://css-tricks.com/datalist-is-for-suggesting-values-without-enforcing-values/
Attachments
Datalist option labels (Left: Chrome, Right: Safari) (19.25 KB, image/png)
2019-10-17 12:29 PDT, Javan Makhmali
no flags
Patch (38.64 KB, patch)
2020-03-31 14:29 PDT, Wenson Hsieh
no flags
Fix GTK build (39.80 KB, patch)
2020-03-31 14:57 PDT, Wenson Hsieh
no flags
Fix flakiness on iOS (39.90 KB, patch)
2020-03-31 16:11 PDT, Wenson Hsieh
no flags
Also fix a typo (39.90 KB, patch)
2020-03-31 16:45 PDT, Wenson Hsieh
no flags
Radar WebKit Bug Importer
Comment 1 2019-09-13 20:22:11 PDT
Javan Makhmali
Comment 2 2019-10-17 12:29:13 PDT
Created attachment 381214 [details] Datalist option labels (Left: Chrome, Right: Safari) Labels can provide useful context to datalist options along with additional data to search and match against. Consider the following: <input type="email" list="people"> <datalist id="people"> <option value="tim@apple.com"> Tim Cook (CEO) </option> <option value="katherine@apple.com"> Katherine Adams (Senior Vice President and General Counsel) </option> <option value="eddy@apple.com"> Eddy Cue (Senior Vice President, Internet Software and Services) </option> </datalist> Chrome displays option values *and* labels, and matches against both when typing in the text field. For example, typing "president" matches the second and third options. Safari only displays option values currently. Typing "president" yields no matching options.
Wenson Hsieh
Comment 3 2020-03-31 14:29:23 PDT Comment hidden (obsolete)
Darin Adler
Comment 4 2020-03-31 14:39:19 PDT
Comment on attachment 395090 [details] Patch View in context: https://bugs.webkit.org/attachment.cgi?id=395090&action=review > Source/WebKit/UIProcess/mac/WebDataListSuggestionsDropdownMac.mm:41 > +static const CGFloat dropdownRowHeightWithoutLabel = 20; > +static const CGFloat dropdownRowHeightWithLabel = 40; > +static const size_t maximumTotalHeightForDropdownCells = 120; As we update code to be more modern, we could use "constexpr" instead of "static const". > Source/WebKit/UIProcess/mac/WebDataListSuggestionsDropdownMac.mm:189 > + [_bottomDivider setWantsLayer:YES]; > + [_bottomDivider setHidden:YES]; > + [_bottomDivider layer].backgroundColor = NSColor.separatorColor.CGColor; If we are going to use some "." syntax then I suggest using it even more: _bottomDivider.wantsLayer = YES; _bottomDivider.hidden = YES; _bottomDivider.layer.backgroundColor = NSColor.separatorColor.CGColor; > Source/WebKit/UIProcess/mac/WebDataListSuggestionsDropdownMac.mm:231 > + [_valueField setStringValue:value]; > + [_labelField setStringValue:label]; > + [_labelField setHidden:!label.length]; Same thought here. If we start using "." syntax in some code it would be good to go all in: _valueField.stringValue = value; _labelField.stringValue = label; _labelField.hidden = !label.length; > Source/WebKit/UIProcess/mac/WebDataListSuggestionsDropdownMac.mm:254 > + [_valueField setTextColor:backgroundStyle == NSBackgroundStyleLight ? NSColor.textColor : NSColor.alternateSelectedControlTextColor]; > + [_labelField setTextColor:NSColor.secondaryLabelColor]; And here we are actively switching some things *away* from "." syntax, but other things *to* "." syntax in the same line of code. Seems peculiar.
Tim Horton
Comment 5 2020-03-31 14:42:16 PDT
Comment on attachment 395090 [details] Patch View in context: https://bugs.webkit.org/attachment.cgi?id=395090&action=review >> Source/WebKit/UIProcess/mac/WebDataListSuggestionsDropdownMac.mm:189 >> + [_bottomDivider layer].backgroundColor = NSColor.separatorColor.CGColor; > > If we are going to use some "." syntax then I suggest using it even more: > > _bottomDivider.wantsLayer = YES; > _bottomDivider.hidden = YES; > _bottomDivider.layer.backgroundColor = NSColor.separatorColor.CGColor; These are RetainPtrs, so no dot notation. (and AFAIK we prefer square brackets to extraneous .get()s)
Darin Adler
Comment 6 2020-03-31 14:42:50 PDT
Comment on attachment 395090 [details] Patch View in context: https://bugs.webkit.org/attachment.cgi?id=395090&action=review >>> Source/WebKit/UIProcess/mac/WebDataListSuggestionsDropdownMac.mm:189 >>> + [_bottomDivider layer].backgroundColor = NSColor.separatorColor.CGColor; >> >> If we are going to use some "." syntax then I suggest using it even more: >> >> _bottomDivider.wantsLayer = YES; >> _bottomDivider.hidden = YES; >> _bottomDivider.layer.backgroundColor = NSColor.separatorColor.CGColor; > > These are RetainPtrs, so no dot notation. (and AFAIK we prefer square brackets to extraneous .get()s) Aha! Subtle! I endorse this.
Wenson Hsieh
Comment 7 2020-03-31 14:50:40 PDT
Comment on attachment 395090 [details] Patch View in context: https://bugs.webkit.org/attachment.cgi?id=395090&action=review Thanks for the review! >> Source/WebKit/UIProcess/mac/WebDataListSuggestionsDropdownMac.mm:41 >> +static const size_t maximumTotalHeightForDropdownCells = 120; > > As we update code to be more modern, we could use "constexpr" instead of "static const". Fixed! >>>> Source/WebKit/UIProcess/mac/WebDataListSuggestionsDropdownMac.mm:189 >>>> + [_bottomDivider layer].backgroundColor = NSColor.separatorColor.CGColor; >>> >>> If we are going to use some "." syntax then I suggest using it even more: >>> >>> _bottomDivider.wantsLayer = YES; >>> _bottomDivider.hidden = YES; >>> _bottomDivider.layer.backgroundColor = NSColor.separatorColor.CGColor; >> >> These are RetainPtrs, so no dot notation. (and AFAIK we prefer square brackets to extraneous .get()s) > > Aha! Subtle! I endorse this. 👍🏻
Wenson Hsieh
Comment 8 2020-03-31 14:57:31 PDT Comment hidden (obsolete)
Wenson Hsieh
Comment 9 2020-03-31 16:11:29 PDT
Created attachment 395106 [details] Fix flakiness on iOS
Wenson Hsieh
Comment 10 2020-03-31 16:45:15 PDT
Created attachment 395108 [details] Also fix a typo
EWS
Comment 11 2020-03-31 18:23:05 PDT
Committed r259330: <https://trac.webkit.org/changeset/259330> All reviewed patches have been landed. Closing bug and clearing flags on attachment 395108 [details].
Note You need to log in before you can comment on or make changes to this bug.