vmware-clarity / ng-clarity

Clarity Angular is a scalable, accessible, customizable, open-source design system built for Angular.

Home Page:https://clarity.design

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

dropdown menu click causes page to horizontally scroll ?

jarekpc opened this issue · comments

This is a bug report for the @clr Angular or UI versions of the design system.
For the web-component implementation of Clarity (@cds), visit vmware-clarity/core.

my package.json:
"@angular/animations": "16.2.12",
"@angular/cdk": "16.2.12",
"@angular/common": "16.2.12",
"@angular/compiler": "16.2.12",
"@angular/core": "16.2.12",
"@angular/forms": "16.2.12",
"@angular/google-maps": "16.2.12",
"@angular/platform-browser": "16.2.12",
"@angular/platform-browser-dynamic": "16.2.12",
"@angular/router": "16.2.12",
"@cds/core": "6.9.1",
"@clr/angular": "16.3.1",
"@clr/icons": "13.0.2",
"@clr/ui": "16.3.1",
If you are a VMware employee or a contractor in VMware, please use our support channel in slack to raise Clarity issues.

Describe the bug

When I updated Clarity and Angular to version 16, clicking on a dropdown in a table causes the page to scroll horizontally

How to reproduce

My code:

<button clrDropdownTrigger (click)="calculatePos($event, node.element)">


<clr-dropdown-menu #menu id="menu" [clrPosition]="menuPosition" *clrIfOpen>
<button clrDropdownItem *ngIf="!isAttached(node.element)" (click)="onAttachButtonClicked(node.element)">
Attach

Steps to reproduce the behavior:

1 Click on icon cog
2. See error (the page will scroll horizontally)

Expected behavior

A clear and concise description of what you expected to happen.

Versions

16
Clarity version:

  • v13.x
  • v15.x
  • [x ] Other:

Framework version:
ie: Angular 15
Angular 16
Device:

  • Type:
  • OS: Windows 10
  • Browser chrome (version: 118.0.5993.89), firefox

Additional notes

Add any other notes about the problem here.

Please add a StackBlitz reproduction. Your code snippets references event handlers without the associated code.

https://stackblitz.com/@clr-team

Here is my code: https://stackblitz.com/edit/clarity-light-theme-clr16-xwajwy?file=src%2Fapp%2Fapp.component.html
When I click on clr-dropdown in cltr-tree, the page scrolls horizontally and disable display flex (screen below):
image

I think is problem with clr-tree because same button, dropdown is working . How to solve this?

Could you answer the question please?

When I updated project to clarity-17 still the same (not working)