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: Parent container scrolls when select opens #3292

Merged
merged 2 commits into from
Feb 17, 2025
Merged

Conversation

YueyingLu
Copy link
Member

@YueyingLu YueyingLu commented Feb 13, 2025

Description

Fix issue AWSUI-60318

Issue:
When Select locates top inside of a overflow:hidden container and at the bottom of the window, the select can not open upwards because overflow:hidden and has little space downwards to display the dropdown. When open the dropdown with a selected option, the page scrolls up. See screen recording in the ticket.

Cause:

  1. When dropdown has very small space to display, the height is calculated to a negative number (because 50 padding we usually have for the dropdown) https://github.com/cloudscape-design/components/blob/main/src/internal/components/dropdown/dropdown-fit-handler.ts#L294. Negative value does not limit the height, so the dropdown overflows out of the view port.
  2. When an option is pre-selected, the option scrolls into view https://github.com/cloudscape-design/components/blob/main/src/select/parts/plain-list.tsx#L52, so the container scrolls up.

Fix:

  1. Set a minimum height 15px to the dropdown.
  2. Stop scrolling the selected option if the dropdown height is <=15px. In this case, the dropdown content is not really readable, scrolling it does not give benefit but can cause page scroll (when the dropdown overflows the viewport).

Test:
Tested manually and added integ tests in the PR.


By submitting this pull request, I confirm that you can use, modify, copy, and redistribute this contribution, under the terms of your choice.

Copy link

codecov bot commented Feb 13, 2025

Codecov Report

All modified and coverable lines are covered by tests ✅

Project coverage is 96.41%. Comparing base (f8f32c5) to head (4f75634).
Report is 5 commits behind head on main.

Additional details and impacted files
@@           Coverage Diff           @@
##             main    #3292   +/-   ##
=======================================
  Coverage   96.41%   96.41%           
=======================================
  Files         791      791           
  Lines       22564    22564           
  Branches     7727     7789   +62     
=======================================
  Hits        21756    21756           
  Misses        754      754           
  Partials       54       54           

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

@YueyingLu YueyingLu marked this pull request as ready for review February 13, 2025 16:32
@YueyingLu YueyingLu requested a review from a team as a code owner February 13, 2025 16:32
@YueyingLu YueyingLu requested review from Al-Dani and removed request for a team February 13, 2025 16:32
@YueyingLu YueyingLu added this pull request to the merge queue Feb 17, 2025
Merged via the queue into main with commit 005def6 Feb 17, 2025
39 checks passed
@YueyingLu YueyingLu deleted the select-scroll branch February 17, 2025 12:31
georgylobko pushed a commit that referenced this pull request Feb 18, 2025
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants