[:has() pseudo-class] :has() selector invalidation issue with toggling :checked on select elements

• Component: CSS
• Status: RESOLVED DUPLICATE

[Bramus]

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.

[Antti Koivisto]

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 ***

[Bramus]

Thanks for clarifying, Antti.

Looking forward to STP 139 then ;)