Open mwargan opened 1 day ago
Note my suggested fix fails in the case of having another dropdown as a direct child of details (rather than in a ul
as I've shown in the original issue):
<details class="dropdown">
<summary>Select a phase of matter...</summary>
<details>
<summary>This is a dropdown option</summary>
<ul>
<li>
<label><input type="radio" name="phase" value="gas" /> Gas </label>
</li>
<li>
<label
><input type="radio" name="phase" value="plasma" /> Plasma
</label>
</li>
</ul>
</details>
<details>
<summary>This is a dropdown option</summary>
<ul>
<li>
<label><input type="radio" name="phase" value="gas" /> Gas </label>
</li>
<li>
<label
><input type="radio" name="phase" value="plasma" /> Plasma
</label>
</li>
</ul>
</details>
</details>
There is another problem in rendering that causes any details elements as children of a dropdown to also render as a dropdown. This is due to this line details.dropdown[open] summary::before
which selects all summary children.
There is another problem in rendering that causes any details elements as children of a dropdown to also render as a dropdown. This is due to this line details.dropdown[open] summary::before
which selects all summary children.
There is another problem in rendering that causes any details elements as children of a dropdown to also render as a dropdown. This is due to this line
details.dropdown[open] summary::before
which selects all summary children.
I have issued a fix for this specific issue here https://github.com/picocss/pico/pull/615
Please search for duplicate or closed issues first.
Describe the issue
When placing a dropdown in a dropdown, the click events of elements inside the parent dropdown get masked and non-clickable due to the ::before element that is used as the "click on background to close" handler.
Current Behavior
All elements within a dropdown containing another dropdown non-clickable except for the last child-dropdown.
Expected Behavior
The click events to work as expected
Reproduction URL
https://jsfiddle.net/f9v860hk/3/
Environment
Safari MacOS, probably others.
Suggested fix
obviously more specific selectors would have to be used / written a bit better so as to avoid the use of
!important
, but I just didn't look into it much more yet.