[Webkit-unassigned] [Bug 235451] New: [:has() pseudo-class] :has() selector invalidation issue with toggling :checked on select elements

bugzilla-daemon at webkit.org bugzilla-daemon at webkit.org
Fri Jan 21 12:29:42 PST 2022


            Bug ID: 235451
           Summary: [:has() pseudo-class] :has() selector invalidation
                    issue with toggling :checked on select elements
           Product: WebKit
           Version: Safari Technology Preview
          Hardware: Unspecified
                OS: Unspecified
            Status: NEW
          Severity: Normal
          Priority: P2
         Component: CSS
          Assignee: webkit-unassigned at lists.webkit.org
          Reporter: bramus at bram.us

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. 

  <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 data-showwhen="1">
  <option value="0">Choose type of Audi …</option>

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

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

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

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:

// 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.

You are receiving this mail because:
You are the assignee for the bug.
-------------- next part --------------
An HTML attachment was scrubbed...
URL: <http://lists.webkit.org/pipermail/webkit-unassigned/attachments/20220121/7c01ccbb/attachment.htm>

More information about the webkit-unassigned mailing list