Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

fix(web): enhanced combobox display #11810

Closed
wants to merge 2 commits into from
Closed

Conversation

stumpigit
Copy link
Contributor

The combo box used to open the selection list only below the input field. If a combo box was previously displayed as the last element of the container, users had to scroll down to see the content.
This PR fixes this problem. As soon as the selection list cannot be displayed, an attempt is made to display it above the input field. If there is no space there either, it is still displayed below with a scrollbar.

Bildschirmaufnahme.2024-08-15.090330.mp4

This required a fix in the IntersectionObserver component. This allows containers to change their size and the IntersectionObserver updates itself.

@alextran1502
Copy link
Contributor

Nice! Is there any way we can avoid the flashing when opening the box, like calculating the location first before displaying

@stumpigit
Copy link
Contributor Author

Do you mean the flashing in the combo box, which first opens at the bottom and then changes to the top? I only noticed this flashing in the video now. When I test it in the browser, I don't see it. Could you also observe this in ‘reality’ or only in the video?
But it could be that it can be seen on slow browsers. I'll see if there's anything I can do about it. But it could still be tricky.

@ben-basten
Copy link
Member

Thank you for your contribution! Closing because a different implementation for this problem has been merged in #12848.

@ben-basten ben-basten closed this Sep 25, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

Successfully merging this pull request may close these issues.

3 participants