Page scrolls to top on single action button click example

[danail-vasilev]

Describe the bug

Page scrolls to top on single action button click

How to reproduce

https://stackblitz.com/edit/clarity-v3-dark-theme-timeline-demo-dg6zfs?file=package.json

Steps to reproduce the behavior:

https://www.screencast.com/t/kPLtJClMENGh

Versions

App

• Angular: 8
• Clarity: Clarity 3.1.11 / 4.0.5

Device:

• OS: Windows
• Browser Chrome

Additional notes

Issue doesn't seem to be reproducible with the online demos.

Bogdan Bogdanov: The issue seems to be caused by this line - https://github.com/vmware/clarity/blob/e28c89b74aad11aeb861ca5cd4a569d9953e8b96/packages/angular/projects/clr-angular/src/data/datagrid/datagrid-action-overflow.ts#L78 .When the button is clicked we search for the first button inside the document and we focus it. That’s why the scroll goes to the top, cause the first button in the document is the one in the first row

[pkonowrocki]

Any luck with fixing this problem for the time being?

[hippee-lee]

The issue here is that the example stackblitz is not using the standard Clarity application layout.

I've updated the example to place application content in the .content-area container as described in the application layout docs.

https://stackblitz.com/edit/gh-5248-app-layout-v4?file=src/app/app.component.html

I know it's not explicitly called out but application components need to be in the correct DOM hierarchy for some parts to work properly.

One more thing, I'm moving this to a discussion since its not an issue, more of a how to that seems to fit better in a discussion for now.

[danail-vasilev]

It's rather strange to wrap all the content inside 3 divs just to avoid that behavior. We've never used these classes for the layout.
Also examples in doc don't seem to have these classes neither mention anything about them. Can you convert that discussion back to an issue or at least for a documentation update ?

[hippee-lee]

Hi @danail-vasilev - app-layout is documented here (v3), (v4) or (v5).

Certain Clarity Angular component features and functionality depending on the specific
Clarity app layout has been part of @clr/angular since the beginning. Unfortunately, we made certain decisions early on that have had effects like this and they are not easily changed at this point. We are focusing on building out the Core components to addresses issues like this as the path forward.