Skip to content

Commit

Permalink
Update HTML parser changes in select explainer
Browse files Browse the repository at this point in the history 
Based on discussion and developer feedback in the WHATWG issue about
HTML parser changes for <select>, we are not requiring <datalist> to be
added to the author HTML for most cases. This PR updates the explainer
to remove <datalist> in a bunch of places.

whatwg/html#10310
  • Loading branch information
@josepharhar
josepharhar committed Jul 29, 2024
1 parent c6d7e72 commit 92f61f0
Showing 1 changed file with 53 additions and 66 deletions.
119 changes: 53 additions & 66 deletions site/src/pages/components/customizableselect.mdx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -62,18 +62,16 @@ And here the same `<select>` with opt ins to the new stylability behavior which

## HTML parser changes

The current behavior in the HTML parser for `<select>` is to remove all tags which aren't `<option>` or `<optgroup>`. We will change the HTML parser to allow `<datalist>` and `<button>` as a child of `<select>`, and allow any other content within that `<datalist>` or `<button>`. The `<button>` allows authors to replace the in-page button which opens the popup, and the `<datalist>` allows authors to replace the popup element containing the options.
The current behavior in the HTML parser for `<select>` is to remove all tags which aren't `<option>` or `<optgroup>`. We will change the HTML parser to allow almost all tags as descendants of `<select>`. Adding `<button>` as a child of `<select>` allows authors to replace the in-page button which opens the popup, and all other tags are put in the popup element containing the options.

Here is a basic example which uses the parser changes:
```html
<select style="appearance:base-select">
<button>
<selectedoption></selectedoption>
</button>
<datalist>
<option>one</option>
<option>two</option>
</datalist>
<option><img src="..." alt="">one</option>
<option><img src="..." alt="">two</option>
</select>
```

Expand All @@ -87,14 +85,11 @@ This example changes the fonts and colors of various parts of the button and lis
<div className="code-container">
```html
<select>
<datalist>
<option>one</option>
<option>two</option>
</datalist>
<option>one</option>
<option>two</option>
</select>
<style>
select datalist,
select button {
select, select::select-fallback-button {
font-family: monospace;
font-size: 12px;
}
Expand All @@ -117,20 +112,18 @@ This example adds "rich content" inside option elements in the form of country f
<div>
```html
<select>
<datalist>
<option>
<img src="usa.jpg" alt="flag of USA">
USA
</option>
<option>
<img src="germany.jpg" alt="flag of Germany">
Germany
</option>
<option>
<img src="spain.jpg" alt="flag of Spain">
Spain
</option>
</datalist>
<option>
<img src="usa.jpg" alt="flag of USA">
USA
</option>
<option>
<img src="germany.jpg" alt="flag of Germany">
Germany
</option>
<option>
<img src="spain.jpg" alt="flag of Spain">
Spain
</option>
</select>
```
</div>
Expand Down Expand Up @@ -177,14 +170,12 @@ This example uses the customizable `<select>` element with custom CSS to target
<button>
<selectedoption></selectedoption>
</button>
<datalist>
<option>
❤️ <span class=description>heart</span>
</option>
<option>
🙂 <span class=description>smile</span>
</option>
</datalist>
<option>
❤️ <span class=description>heart</span>
</option>
<option>
🙂 <span class=description>smile</span>
</option>
</select>
<style>
selectedoption .description {
Expand All @@ -203,40 +194,38 @@ selectedoption .description {

### Putting custom content in the listbox

This example has a `<datalist>` which enables it to put arbitrary content into the listbox rather than just `<option>`s.
This example has a complex structure wrapping the `<option>`s which is all slotted into the popover element.

<div className="code-image-container">
<div>
```html
<select>
<datalist>
<div class=container>
<div>
<optgroup label="1-2">
<option>one</option>
<option>two</option>
</optgroup>
</div>
<div>
<optgroup label="3-4">
<option>three</option>
<option>four</option>
</optgroup>
</div>
<div>
<optgroup label="5-6">
<option>five</option>
<option>six</option>
</optgroup>
</div>
<div>
<optgroup label="7-8">
<option>seven</option>
<option>eight</option>
</optgroup>
</div>
<div class=container>
<div>
<optgroup label="1-2">
<option>one</option>
<option>two</option>
</optgroup>
</div>
</datalist>
<div>
<optgroup label="3-4">
<option>three</option>
<option>four</option>
</optgroup>
</div>
<div>
<optgroup label="5-6">
<option>five</option>
<option>six</option>
</optgroup>
</div>
<div>
<optgroup label="7-8">
<option>seven</option>
<option>eight</option>
</optgroup>
</div>
</div>
</select>
<style>
.container {
Expand Down Expand Up @@ -286,11 +275,9 @@ Here is another example with custom content in the listbox: [codepen](https://co
<button><selectedoption id=myselectedoption></selectedoption></button>
<select selectedoptionelement=myselectedoption>
<button>⬇️</button>
<datalist>
<option>Create a merge commit</option>
<option>Squash and merge</option>
<option>Rebase and merge</option>
</datalist>
<option>Create a merge commit</option>
<option>Squash and merge</option>
<option>Rebase and merge</option>
</select>
```
</div>
Expand Down

0 comments on commit 92f61f0

Please sign in to comment.