Bug 235451 - [:has() pseudo-class] :has() selector invalidation issue with toggling :checked on select elements
Summary: [:has() pseudo-class] :has() selector invalidation issue with toggling :check...
Status: RESOLVED DUPLICATE of bug 234561
Alias: None
Product: WebKit
Classification: Unclassified
Component: CSS (show other bugs)
Version: Safari Technology Preview
Hardware: Unspecified Unspecified
: P2 Normal
Assignee: Nobody
URL:
Keywords:
Depends on:
Blocks:
 
Reported: 2022-01-21 12:29 PST by Bramus
Modified: 2022-01-24 07:57 PST (History)
1 user (show)

See Also:


Attachments

Note You need to log in before you can comment on or make changes to this bug.
Description Bramus 2022-01-21 12:29:42 PST
I see that https://bugs.webkit.org/show_bug.cgi?id=234561 got closed as RESOLVED FIXED, but I have similar a demo that's not working properly: https://codepen.io/bramus/pen/exrYVW

When changing the value of the first dropdown, it should enable the corresponding dropdown which is a sibling. 

```html
<select>
  <option value="0">Choose …</option>
  <option value="1">Audi</option>
  <option value="2">BMW</option>
  <option value="3">Ford</option>
  <option value="4">Mercedes</option>
</select>

<select data-showwhen="1">
  <option value="0">Choose type of Audi …</option>
  …
</select>

<select data-showwhen="2">
  <option value="0">Choose type of BMW …</option>
  …
</select>

<select data-showwhen="3">
  <option value="0">Choose type of Ford …</option>
  …
</select>

<select data-showwhen="4">
  <option value="0">Choose type of Mercedes …</option>
  …
</select>
```

```css
select[data-showwhen] {
  cursor: not-allowed;
  pointer-events: none;
  opacity: 0.5;
}

select:not([data-showwhen]):has(option[value="1"]:checked) ~ select[data-showwhen="1"],
select:not([data-showwhen]):has(option[value="2"]:checked) ~ select[data-showwhen="2"],
select:not([data-showwhen]):has(option[value="3"]:checked) ~ select[data-showwhen="3"],
select:not([data-showwhen]):has(option[value="4"]:checked) ~ select[data-showwhen="4"] {
  cursor: default;
  pointer-events: auto;
  opacity: 1;
}
```

When changing the value of the first dropdown, nothing happens, although it should. Perhaps it has to do that these are select elements, and not input elements?

Forcing a style recall + repaint does not help:

```js
// Force a repaint on change
document.querySelector('select').addEventListener('input', (e) => {
	document.documentElement.className = 'reflow_' + (new Date()).getTime();
});
```


What does work is opening Web Inspector: after changing the value of the first dropdown and then focussing Web Inspector, the page seems to get restyled and pained. The confirms that the CSS itself works.
Comment 1 Antti Koivisto 2022-01-24 04:16:05 PST
Looks fine with trunk. 

STP138 was based on a fairly old revision and did not yet include this fix.

*** This bug has been marked as a duplicate of bug 234561 ***
Comment 2 Bramus 2022-01-24 07:57:00 PST
Thanks for clarifying, Antti.

Looking forward to STP 139 then ;)