[CL-330] Prevent select dropdowns from floating when scrolling #11715
+1,770
−1,076
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
* update typography docs, story, color * add SM Sans font, remove Open Sans --------- Co-authored-by: Oscar Hinton <[email protected]>
Co-authored-by: Will Martin <[email protected]>
* update callout styles; make component standalone * add import block to mdx page
* update styles and add card story * update docs * add important to typography styles * [CL-239] simple dialog style refresh * [CL-342] fix text overflow in dialog; add story * use main color for headers * update loading styles: spinner height and alt text; body min height * update simple dialog border radius * add badge to story
* add readonly styles * update label styles; update stories * code review changes
Codecov ReportAll modified and coverable lines are covered by tests ✅
✅ All tests successful. No failed tests found. Additional details and impacted files@@ Coverage Diff @@
## ps/extension-refresh #11715 +/- ##
=====================================================
Coverage 33.54% 33.55%
=====================================================
Files 2810 2810
Lines 87400 87400
Branches 16667 16667
=====================================================
+ Hits 29322 29329 +7
+ Misses 55775 55768 -7
Partials 2303 2303 ☔ View full report in Codecov by Sentry. |
|
New Issues
Fixed Issues
|
vleague2
changed the title
willmartian
reviewed
Oct 28, 2024
| @@ -17,7 +17,7 @@ | |||
| [clearSearchOnAdd]="true" | |||
| [labelForId]="labelForId" | |||
| [keyDownFn]="keyDown" | |||
| appendTo="body" | |||
| appendTo="#ng-select-append-target" | |||
There was a problem hiding this comment.
- Since this is our functionality and is not internal to
libs/components, I would rename this tobit-select-append-target - I think a class selector might be more appropriate here:
.bit-select-append-target. That way it still works if the target element already has some id.
vleague2
changed the title
vleague2
commented
Oct 30, 2024
| @@ -12,7 +12,7 @@ | |||
| <ng-content select="[slot=above-scroll-area]"></ng-content> | |||
| </div> | |||
| <div | |||
| class="tw-max-w-screen-sm tw-mx-auto tw-overflow-y-auto tw-flex tw-flex-col tw-w-full tw-h-full tw-styled-scrollbar" | |||
| class="ng-select-append-target tw-max-w-screen-sm tw-mx-auto tw-overflow-y-auto tw-flex tw-flex-col tw-w-full tw-h-full tw-styled-scrollbar tw-relative" | |||
There was a problem hiding this comment.
ℹ️ I don't think we need this on the body for the extension because I think every page uses this... but I could be wrong. In which case it's very easy to add to the body too for pages that don't have the popup-page
vleague2
added
hold
vleague2
changed the title
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
🎟️ Tracking
CL-330
📔 Objective
Select and multiselect dropdowns were "floating" on the screen when scrolling in the extension refresh, instead of scrolling along with the container. This was also happening in dialogs.
The issue is due to the way the underlying
ng-selectlibrary positions the dropdown popup. We had set it to always attach itself as a child of thebodyon the page, and this meant that the dropdown popup would position itself according to thebodyplacement. However, this was not the correct parent element for dialogs and the extension, which uses thepopup-layout. Because the dropdowns were not attached to the scrollable main containers of those elements, they were not responding to the scroll events. This is solved by specifying where the dropdown container should be attached for different clients and components.📸 Screenshots
Before
Screen.Recording.2024-10-30.at.10.43.09.AM.mov
After
Screen.Recording.2024-10-30.at.10.42.47.AM.mov
⏰ Reminders before review
🦮 Reviewer guidelines
:+1:) or similar for great changes:memo:) or ℹ️ (:information_source:) for notes or general info:question:) for questions:thinking:) or 💭 (:thought_balloon:) for more open inquiry that's not quite a confirmed issue and could potentially benefit from discussion:art:) for suggestions / improvements:x:) or:warning:) for more significant problems or concerns needing attention:seedling:) or ♻️ (:recycle:) for future improvements or indications of technical debt:pick:) for minor or nitpick changes