search

vmware-clarity / core

Clarity is a scalable, accessible, customizable, open-source design system built with web components. Works with any JavaScript framework, created for enterprises, and designed to be inclusive.
https://clarity.design
MIT License
163 stars 42 forks source link

Dropdowns don't scroll with the page #181

Open ashleyryan opened 1 year ago

ashleyryan commented 1 year ago

Describe the bug

A cds-dropdown seems to stay pinned to it's position on the page instead of scrolling with it's anchor element if the page scrolls.

How to reproduce

https://stackblitz.com/edit/clarity-dark-theme-clr13-cds6-nlxpe6?file=src%2Fapp%2Fapp.component.html,src%2Fapp%2Fapp.component.ts

Steps to reproduce the behavior:

  1. Click on the i icon and scroll the page when the NG signpost opens. Notice how it scrolls with the anchor element
  2. Click on the button to open the cds-dropdown.
  3. Notice how the dropdown stays fixed while it's anchor scrolls away with the page.

Expected behavior

The dropdown should scroll with the anchor

Versions

Clarity project:

Clarity version:

ashleyryan commented 1 year ago

This seems to be related to the position: fixed set on the host element: https://github.com/vmware-clarity/core/blob/main/projects/core/src/internal-components/popup/popup.element.scss#L34 This is the same logic and css used for overlays like the modal overlay, so it looks like its all intended to be used like an overlay.