search

Tropix126 / fluent-svelte

A faithful implementation of Microsoft's Fluent Design System in Svelte.
https://fluent-svelte.vercel.app
MIT License
624 stars 28 forks source link

fix for the `ComboBox` positioning issue #48

Closed kaizjen closed 2 years ago

kaizjen commented 2 years ago

This PR modifies how <ComboBox> calculates its offset.

It uses el.getBoundingClientRect() to detect the difference between the selected item and the ComboBox's button and moves the menu by this difference.

This does not fix the other issue when the ComboBox will be displayed out of the screen's bounds. I left a proposed solution commented out, because I think it's not the most optimal way of doing it.

Doesn't yet close #6, because some display issues still remain.

vercel[bot] commented 2 years ago

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name Status Preview Updated
fluent-svelte ✅ Ready (Inspect) Visit Preview May 29, 2022 at 4:16PM (UTC)
kaizjen commented 2 years ago

Note that to compare how my solution works with the current ComboBox implementation, you will need to create more than 14 items in the ComboBox. I didn't want to edit the 'test' page, so I decided not to include it in the commit

Tropix126 commented 2 years ago

Thank you! LGTM.

kaizjen commented 2 years ago

There's an interesting issue with my implementation: it doesn't work with scroll-behavior: smooth. It seems like it's records the selected item's position before it was actually scrolled to.

To fix this, we just need to put scroll-behavior: auto on the <ul> element. I guess I should make another PR for this, since this one was already merged?