:checked is removed on <select> elements while dropdown is open
Categories
(Core :: Layout: Form Controls, defect)
Tracking
()
| Tracking | Status | |
|---|---|---|
| firefox137 | --- | fixed |
People
(Reporter: b46r43nawr, Assigned: emilio)
Details
Attachments
(1 file)
Hi,
There seems to be some buggy behaviour with the :checked pseudo-class selector when applying it to options and while select is open.
Rules do not seem to apply correctly while selector is opened, however using :invalid as a proxy to check if the empty option is selected works properly.
Here's a sample HTML:
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Test</title>
<style>
#grid { display: grid; grid-auto-flow: column; }
.cell { border: solid thin; }
#select1 option[value=""]:checked + option { display: none; }
#select2:invalid option[value=""] + option { display: none; }
.cell:has(#select3 option[value=""]:checked) { direction: rtl; }
.cell:has(#select4:invalid) { direction: rtl; }
</style>
</head>
<body>
<div id="grid">
<div class="cell">
<select id="select1">
<option value="">Empty</option>
<option value="1">First</option>
<option value="2">Second</option>
</select>
</div>
<div class="cell">
<select id="select2" required>
<option value="">Empty</option>
<option value="1">First</option>
<option value="2">Second</option>
</select>
</div>
<div class="cell">
<select id="select3">
<option value="">Empty</option>
<option value="1">First</option>
<option value="2">Second</option>
</select>
</div>
<div class="cell">
<select id="select4" required>
<option value="">Empty</option>
<option value="1">First</option>
<option value="2">Second</option>
</select>
</div>
</div>
</body>
</html>
On the first select, #select1 one can see on the element inspector that the option "First" is being hidden, however when opening that option is visible.
The second select, #select2 one can see on the element inspector that the option "First" is being hidden. Unlike #select1, when opening the select, the option remains hidden.
On the third select, #select3 is correctly placed on the right of the corresponding <div>, however when clicking the select, the options are displayed on the left of the <div>.
On the fourth select, #select4 is correctly places on the right of the corresponding <div>. Unlike #select3, when opening the select, the options are displayed on the right.
|
Reporter | |
Updated•1 month ago
|
|
|
Reporter | |
Comment 1•1 month ago
|
||
Tested it with Chromium 133 and the buggy behaviour doesn't seem to occur: first and second selects keep the "First" option hidden even while dropdown menu is open and third and fourth selects are properly drawn on the right of the cell even while dropdown menu is open.
|
|
Reporter | |
Comment 2•1 month ago
|
||
Hi,
I've been taking a look and the problems seems to be on toolkit/actors/SelectChild.sys.mjs, especifically the following:
_setupPseudoClassStyles() {
if (this._pseudoStylesSetup) {
throw new Error("pseudo styles must not be set up yet");
}
// Do all of the things that change style at once, before we read
// any styles.
this._pseudoStylesSetup = true;
InspectorUtils.addPseudoClassLock(this.element, ":focus");
let lockedDescendants = (this._lockedDescendants =
this.element.querySelectorAll(":checked"));
for (let child of lockedDescendants) {
// Selected options have the :checked pseudo-class, which
// we want to disable before calculating the computed
// styles since the user agent styles alter the styling
// based on :checked.
InspectorUtils.addPseudoClassLock(child, ":checked", false);
}
},
For some reason the ":checked" pseudo-class is temporarily disabled before drawing the dropdown menu.
I'm not sure what the original purpose of this was, but making the following change, for testing purposes, makes the dropdown menus display properly
-let lockedDescendants = (this._lockedDescendants =
-
this.element.querySelectorAll(":checked"));
+let lockedDescendants = (this._lockedDescendants = []);
|
Assignee | |
Comment 3•29 days ago
|
||
Yeah I guess this has historically not a problem because you couldn't style up the tree using :has()...
|
|
Assignee | |
Comment 4•29 days ago
|
||
This was needed to not pick up the custom option background / color in
the UA sheet when stylable select is enabled (so, on Windows).
Instead, restrict the checked styling in the UA sheet to listbox select,
and remove the special code.
|
|
Assignee | |
Updated•29 days ago
|
|
|
Reporter | |
Comment 5•29 days ago
|
||
I'm not familiar with the process.
Will this be merged into the current ESR version?
|
|
Assignee | |
Comment 6•29 days ago
|
||
Probably not, unless there's a very strong reason for it?
|
|
Reporter | |
Comment 8•28 days ago
|
||
I just wanted to know if this fix would make it into Tor Browser but I guess it'll have to wait until September.
|
||
Comment 9•28 days ago
|
||
| bugherder | ||
Description
•