Dropdown does not show desired arrow on open state [#3518192]

Problem/Motivation

The dropdown component does not show the desired arrow on open state, because the css is()-Function is not usable for pseudo elements (see https://developer.mozilla.org/en-US/docs/Web/CSS/:is#is_does_not_select_pseudo-elements).

Steps to reproduce

1) Use Olivero as default theme.
2) Go to a page which have a dropdown component.
3) Open a dropdown with more than one child.
4) The arrow shows to bottom on closed stated and on open state it should still the same arrow.

Currently
Before

Updated
After

Proposed resolution

Move the @nest rule outside of the ::before pseudo element in Line 69 of the dropdown.pcss.css:

  &::before {
    display: block;
    width: var(--sp0-5);
    height: var(--sp0-5);
    content: "";
    transform: translateY(-25%) rotate(45deg);
    border-right: solid 2px var(--dropbutton--outline-color);
    border-bottom: solid 2px var(--dropbutton--outline-color);
  }
  
  @nest .dropbutton-wrapper.open & {
    transform: translateY(25%) rotate(225deg);
  }

instead of:

  &::before {
    display: block;
    width: var(--sp0-5);
    height: var(--sp0-5);
    content: "";
    transform: translateY(-25%) rotate(45deg);
    border-right: solid 2px var(--dropbutton--outline-color);
    border-bottom: solid 2px var(--dropbutton--outline-color);

    @nest .dropbutton-wrapper.open & {
      transform: translateY(25%) rotate(225deg);
    }
  }

Comment	File	Size	Author
#22	without_MR.png	69.52 KB	arunsahijpal
#20	Dropdown After fix.png	55.99 KB	kanchan bhogade
#16	3518192-nr-bot.txt	91 bytes	needs-review-queue-bot
#14	after.png	98.14 KB	snehal-chibde
#14	before.png	98.16 KB	snehal-chibde
#9	BeforeMR.png	18.79 KB	kanchan bhogade
#9	AfterMR.png	26.65 KB	kanchan bhogade
#8	3518192-after.gif	128.79 KB	sandip
#8	3518192-before.gif	116.71 KB	sandip
#7	after-open-state-dropdown.png	9.55 KB	joville
#7	after-closed-state-dropdown.png	6.55 KB	joville
#7	current-open-state-dropdown.png	9.55 KB	joville
#7	current-closed-state-drowpdown.png	6.57 KB	joville

Issue fork drupal-3518192

Show commands

Start within a Git clone of the project using the version control instructions.

Add & fetch this issue fork’s repository

Or, if you do not have SSH keys set up on git.drupalcode.org:

Add & fetch this issue fork’s repository

4 hidden branches

11.x

changes, plain diff MR !11788

Check out this branch for the first time

Check out existing branch, if you already have it locally

3518192-dropdown-does-not-10.6

changes, plain diff MR !12668

Check out this branch for the first time

Check out existing branch, if you already have it locally

joville-8a7ea3a9-patch-aa99

changes, plain diff MR !11790

Check out this branch for the first time

Check out existing branch, if you already have it locally

3518192-dropdown-does-not

compare

Check out this branch for the first time

Check out existing branch, if you already have it locally

About issue forks

Comments

Comment #1

9 April 2025 at 14:08

joville created an issue. See original summary.

Comment #2

9 April 2025 at 14:19

joville changed the visibility of the branch 3518192-dropdown-does-not to hidden.

Comment #3

10 April 2025 at 06:48

joville opened merge request !11788

Comment #4

10 April 2025 at 08:08

joville opened merge request !11790

Comment #5

10 April 2025 at 08:09

joville changed the visibility of the branch 11.x to hidden.

Comment #6

jatingupta40 commented 11 April 2025 at 08:42

Hello @joville
Can you please share few more details like a screenshot of the issue or anything else because i am not able to reproduce this issue on my end.
Thanks.

Comment #7

joville commented 13 April 2025 at 16:38

Status	File	Size
new	current-closed-state-drowpdown.png	6.57 KB
new	current-open-state-dropdown.png	9.55 KB
new	after-closed-state-dropdown.png	6.55 KB
new	after-open-state-dropdown.png	9.55 KB

There you see the screenshots about this issue.

Comment #8

sandip commented 2 May 2025 at 10:33

Status:

Active

» Needs review

Status	File	Size
new	3518192-before.gif	116.71 KB
new	3518192-after.gif	128.79 KB

Hi @joville, Reproduced this issue in my local successfully. To reproduce this issue i make olivero as Admin theme and go to the /admin/structure/block page. Also changes in the MR not seems to effect any regression. Moving this to Needs Review so maintainers can share their feedback on it.

Comment #9

kanchan bhogade commented 2 May 2025 at 11:58

Status	File	Size
new	AfterMR.png	26.65 KB
new	BeforeMR.png	18.79 KB

Hi
I have tested MR 11790 on Drupal version 11.x
The MR is applied successfully, but in issue summary MR is Open Failed Pipeline.

The Dropdown arrow functions as expected after applied MR.

, but in issue summary MR is Open Failed Pipeline.

Moving to Needs work

Comment #10

kanchan bhogade commented 2 May 2025 at 11:58

Status:

Needs review

» Needs work

Comment #11

sandip commented 2 May 2025 at 12:08

Status:

Needs work

» Needs review

Hi @kanchan bhogade, i think the failure of pipeline is not related to the file changes in the MR. Can you please check it once.

Comment #12

ressa

he/him

commented 14 May 2025 at 11:42

Issue summary:

View changes

It does look unrelated, @sandip you can always try to run that specific failing test again, to make it go green?

Also, adding the GIF's in the Issue Summary, to show visually what this issue is about.

Comment #13

sandip commented 14 May 2025 at 12:19

After running the failed tests the pipeline is green now.

Comment #14

snehal-chibde commented 15 May 2025 at 09:59

Status	File	Size
new	before.png	98.16 KB
new	after.png	98.14 KB

Hello, I have tested the MR on Drupal version 11.2.x, in Olivero Theme and it is working as expected.
Added before and after screenshots for reference.

Comment #15

sandip commented 15 May 2025 at 10:40

Status:

Needs review

» Reviewed & tested by the community

I think we can move this issue to RTBC as the MR provided by @joville fix the issue correctly as i mention in #8

Comment #16

needs-review-queue-bot commented 10 June 2025 at 15:12

Status:

Reviewed & tested by the community

» Needs work

Status	File	Size
new	3518192-nr-bot.txt	91 bytes

The Needs Review Queue Bot tested this issue. It no longer applies to Drupal core. Therefore, this issue status is now "Needs work".

This does not mean that the patch necessarily needs to be re-rolled or the MR rebased. Read the Issue Summary, the issue tags and the latest discussion here to determine what needs to be done.

Consult the Drupal Contributor Guide to find step-by-step guides for working with issues.

Comment #17

jatingupta40 commented 12 June 2025 at 09:59

Status:

Needs work

» Needs review

The patch applied cleanly and it the dropdown is working fine.
Moving it again to In Review.

Comment #18

12 June 2025 at 12:10

igorgoncalves made their first commit to this issue’s fork.

Comment #19

igorgoncalves commented 12 June 2025 at 12:20

Thanks @jatingupta40

the MR was showing a red line at csslint:
"description":"Unexpected deprecated at-rule \"@nest\" (at-rule-no-deprecated)"

I committed a fix and Lint looks all green now.

I also applied the last changed patch, and the bug is fixed.

Comment #20

kanchan bhogade commented 12 June 2025 at 13:15

Status	File	Size
new	Dropdown After fix.png	55.99 KB

Hi
I have tested MR 11790 on Drupal 11.x
With MR Dropdown shows desired arrow on open state
Attaching SS for reference

Comment #21

19 June 2025 at 13:53

ahsannazir made their first commit to this issue’s fork.

Comment #22

arunsahijpal commented 4 July 2025 at 11:44

Status	File	Size
new	without_MR.png	69.52 KB

I think the issue is fixed now pls check.
As I am unable to reproduce it.

Comment #23

sandip commented 7 July 2025 at 11:17

Status:

Needs review

» Reviewed & tested by the community

Hi @arunsahijpal, it is supposed to test the issue in Olivero theme. By looking at your attached image it seems you are testing it in Claro theme.

I tested the MR in local and as the conflicts is resolved and the before and after images are identical to the one that I already attached in comment #8, so I’m not reattaching any images to avoid unnecessary polute.

So moving this issue to RTBC.

Comment #24

8 July 2025 at 13:07

nod_ closed merge request !11790

Comment #25

8 July 2025 at 13:12

nod_ committed 2732a4f2 on 11.2.x

Issue #3518192 by joville, igorgoncalves, sandip, ressa: Dropdown does...

Comment #26

8 July 2025 at 13:12

nod_ committed 601118ff on 11.x

Issue #3518192 by joville, igorgoncalves, sandip, ressa: Dropdown does...

Comment #27

nod_

French

Lille

commented 8 July 2025 at 13:13

Version:	11.x-dev	» 10.6.x-dev
Status:	Reviewed & tested by the community	» Patch (to be ported)

Committed 2732a4f and pushed to 11.2.x. Thanks!
We need a MR for 10.6.x and below. Cherry pick isn't clean

Comment #28

sandip commented 9 July 2025 at 05:08

I am working on creating the MR for 10.6.x

Comment #29

9 July 2025 at 07:13

sandip opened merge request !12668

Comment #30

sandip commented 9 July 2025 at 07:41

Status:

Patch (to be ported)

» Needs review

Hi @nod_, I have created the MR. As @nest is removed from all stylesheets in latest 11 version but it is still in use in 10 versions. So i thought not to use @nest here as it is removed in 11 versions.

Please share your thought if it is correct or do i need to add @nest here for 10.6.x