235451 2022-01-21 12:29:42 -0800 [:has() pseudo-class] :has() selector invalidation issue with toggling :checked on select elements 2022-01-24 07:57:00 -0800 1 1 1 Unclassified WebKit CSS Safari Technology Preview Unspecified Unspecified RESOLVED DUPLICATE 234561 https://bugs.webkit.org/show_bug.cgi?id=234561 P2 Normal --- 1 bramus webkit-unassigned koivisto oldest_to_newest 1832846 0 bramus 2022-01-21 12:29:42 -0800 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. 1833251 1 koivisto 2022-01-24 04:16:05 -0800 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 *** 1833315 2 bramus 2022-01-24 07:57:00 -0800 Thanks for clarifying, Antti. Looking forward to STP 139 then ;)