Body / Page scroll happening when clicking on dropdown menu

[ROJAYADHAV]

Body / Page scroll happening when clicking on dropdown menu

Describe the bug

Main page scrolling when click on dropdown menu

How to reproduce

Angular v - 13.3.11 "@cds/core": "^6.2.2", "@clr/angular": "~13.10.0", "@clr/icons": "~13.0.2", "@clr/ui": "~13.10.0", node v - 14.17.5

Steps to reproduce the behavior:

This is the code we are currently using . When we click the dropdown menu , the whole page is scrolling to top and also to bottom sometimes. Can anyone please help me for this.

[Jinnie]

Please, create a StackBlitz reproduction of the issue. These are our starter templates: https://stackblitz.com/@clr-team/

[ROJAYADHAV]

Please find the below link where on click of last 2 dropdowns I can see window is getting scrolled.

https://stackblitz.com/edit/clarity-light-theme-clr13-cds6-abht4s?file=src/app/app.component.html

[Jinnie]

Is it fully saved? I only see several dropdowns and no scrolling container. If I add some white space above them, and then start clicking on the dropdowns, I can't reproduce scroll to bottom/top. It only adds some space at the end of the document. I've heard similar problems reported before, though, so I want to make sure we properly reproduce it. Could you describe step by step exactly what you are doing and what are you observing? A screen cast may also help.

[ROJAYADHAV]

It is fully saved @Jinnie. Can you please try to run this example in new tab.

step 1: Click on last dropdown down arrow. After opening the last dropdown menu there is a vertical scroll movement.

Please find the snapshot below where I have highlighted the scroller issue.

[kevinbuhmann]

It seems to be scrolling the dropdown into view which I think should be expected.

[ROJAYADHAV]

Hi @kevinbuhmann I can see this behavior is not happening in case of angular 9 and clarity 3.x version

[kevinbuhmann]

Hi @kevinbuhmann I can see this behavior is not happening in case of angular 9 and clarity 3.x version

It could be a new feature. Maybe @Jinne knows.

[ROJAYADHAV]

Hi @kevinbuhmann I can see this behavior is not happening in case of angular 9 and clarity 3.x version

It could be a new feature. Maybe @Jinne knows.

Hi @Jinnie Can you please confirm regarding the same.

[ROJAYADHAV]

One more observation that I have seen is when I am using clr-dropdown inside clr-dropdown-menu I can see that parent/document window vertical scroll is not happening. But it gave us another issue regarding keyboard up/down events where we cannot navigate through dropdown menu options.

[ietabhi]

I am facing same problem as well, we have dropdown content as absolute position so ideally it should not jump page. my customer will not like jumping pages specially when they click on dropdown.

[ROJAYADHAV]

Hi @Jinnie , Any updates on this issue?

[Jinnie]

What you observe as changed behavior may be related to the focus navigation, which has changed since v3, which is out of support for at least 2 years now. I am still unable to reproduce any problem with the provided Stackblitz, unless I resize to a very small window, where some container resizing is naturally forced and leads to scroll event.

[Jinnie]

What browser and OS are you using to observe the problem?

[ROJAYADHAV]

We are using chrome browser and windows 10

[Jinnie]

I can not find anything in the code that's forcing a scroll into view, but it's possible to be related to the first item focusing. The dropdown component is using its own focus management solution. In v13 we may want to offload all focus management to the CDK utilities. Any work on this bug should happen after the CDK is merged in our codebase. I'm assigning this to myself for proper tracking, when the above changes get merged.

[Jinnie]

Waiting for this PR to get merged, before we can work on changing the focus management solution: https://github.com/vmware-clarity/ng-clarity/pull/426/