-
Notifications
You must be signed in to change notification settings - Fork 6.7k
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(select): prevent the panel from going outside the viewport horizontally #3864
Conversation
f9a10ab
to
3393ba2
Compare
@jelbourn can you take a look at this one? I'll sort out the CI failure and the conflicts afterwards. |
@kara should look at this one, I'm not as familiar with how the select does positioning |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Rebase this one?
src/lib/select/select.ts
Outdated
* Calculates the y-offset of the select's overlay panel in relation to the | ||
* top start corner of the trigger. It has to be adjusted in order for the | ||
* selected option to be aligned over the trigger when the panel opens. | ||
*/ | ||
private _calculateOverlayOffset(selectedIndex: number, scrollBuffer: number, | ||
private _calculateOverlayYOffset(selectedIndex: number, scrollBuffer: number, |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Nit: How about renaming to _calculateOverlayOffsetY
and _calculateOverlayOffsetX
? As is, it's a bit hard to scan for which one it is because the X and Y are buried in the middle.
src/lib/select/select.ts
Outdated
@@ -85,6 +85,9 @@ export const SELECT_PANEL_PADDING_Y = 16; | |||
*/ | |||
export const SELECT_PANEL_VIEWPORT_PADDING = 8; | |||
|
|||
/** Extra width that gets added the to select panel during the open animation. */ |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Typo: the to
=> to the
src/lib/select/select.ts
Outdated
* content width in order to constrain the panel within the viewport. | ||
*/ | ||
private _calculateOverlayXOffset(): void { | ||
let overlayRect = this.overlayDir.overlayRef.overlayElement.getBoundingClientRect(); |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Nit: const for the ones you don't expect to change?
src/lib/select/select.ts
Outdated
@@ -85,6 +85,9 @@ export const SELECT_PANEL_PADDING_Y = 16; | |||
*/ | |||
export const SELECT_PANEL_VIEWPORT_PADDING = 8; | |||
|
|||
/** Extra width that gets added the to select panel during the open animation. */ | |||
export const SELECT_PANEL_EXTRA_WIDTH = 32; |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
This is always going to be twice the SELECT_PANEL_PADDING_X
, no? Can we calculate this from the other constant in case it changes?
src/lib/select/select.spec.ts
Outdated
|
||
it('should stay within the viewport when overflowing on the right in rtl', async(() => { | ||
dir.value = 'rtl'; | ||
select.style.left = '-100px'; |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Seems like either the test name or the style here is out of sync. Did you mean to say "when overflowing on the left in rtl"? The test on line 947 seems to cover the case on the right.
b63f612
to
6bd9f4a
Compare
Addressed the feedback, fixed the test failures, rebased and squashed @kara. Can you take one more look? |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
LGTM
@crisbeto Needs rebase |
6bd9f4a
to
3333fae
Compare
Rebased, but it seems like one of the tests broke. Will relabel when it's fixed. |
…ntally Prevents the select panel from going outside the viewport along the x axis. Fixes angular#3504. Fixes angular#3831.
3333fae
to
5e55436
Compare
There we go. Had deleted the |
This issue has been automatically locked due to inactivity. Read more about our automatic conversation locking policy. This action has been performed automatically by a bot. |
Prevents the select panel from going outside the viewport along the x axis.
Fixes #3504.
Fixes #3831.