mi6 / mi6/ic-ui-kit

Internal issue 2940 - IcPopoverMenu - Menu rendering too far above anchor element within IcDataTable

Open
#2,897 1 comment 0 reactions 0 assignees View on GitHub
data-table component popover component
Dominant language
TypeScript
Stars
53
Forks
63
Avg merge
2d 4h
Merged PRs (30d)
15

Description

Note: Screenshots and Stackblitz provided on internal ticket

We've been experiencing some strange behaviour with our IcPopovers which have been integrated into an IcDataTable. This specifically occurs when the IcDataTable has few rows / is close to the end of the viewport.

 

Standard Popover behaviour is fine; the Popover renders down and associated with its anchor element as expected (anchor circled).

For another Popover, whose anchor is close to the bottom of the viewport, the Popover cannot render beneath the anchor and instead renders upwards (as is expected behaviour). But for some reason, it renders with a much greater offset.

I've verified within the DOM that the anchor element is being set correctly. It seems a larger than usual transformation style is being applied to the Popover in this circumstance.

Contributor guide

Open the contributing guide

Research direction

Start by reproducing IcPopoverMenu inside IcDataTable with few rows near the bottom of the viewport, using the Stackblitz and screenshots from the internal ticket. Inspect the positioning and transformation applied when the menu opens upward. Done means the popover remains correctly aligned with its anchor in both downward- and upward-opening cases.

Written by the indexing model from the issue text.

Assessment

Tech stack
typescript
Domain
frontend
Issue type
Bug
Difficulty
4/5
Estimated time
3-5 days
Activity status
Stale
Clarity
Needs clarification
Newbie friendliness
35/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.