fix(material/autocomplete): autocomplete panel top is cut off in landscape mode #28982
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
crisbeto
reviewed
May 1, 2024
| // Prevents autocomplete panel from being cut-off from being viewed in landscape orientation. | ||
| @media all and (orientation: landscape) { | ||
| div.mat-mdc-autocomplete-panel { | ||
| max-height: 55vh; |
There was a problem hiding this comment.
I'm not sure if we can count on 55vh since the position of the trigger and number of options can vary. The CDK overlay can be set up in a way that starts scrolling once it hits the viewport edge. We should be able to add something like this:
.withFlexibleDimensions(true)
.withGrowAfterOpen(true)
.withViewportMargin(8)
There was a problem hiding this comment.
Thanks for the feedback @crisbeto! Will look into applying your recommended solution.
essjay05
force-pushed
the
autocomplete-landscape-listbox-a11y-fix
branch
from
a20c534 to
fe21a54
Compare
|
Screencast after recommended changes here |
crisbeto
approved these changes
May 2, 2024
essjay05
force-pushed
the
autocomplete-landscape-listbox-a11y-fix
branch
from
fe21a54 to
05b7c72
Compare
essjay05
force-pushed
the
autocomplete-landscape-listbox-a11y-fix
branch
2 times, most recently
from
1acff7d to
e7bb070
Compare
essjay05
force-pushed
the
autocomplete-landscape-listbox-a11y-fix
branch
3 times, most recently
from
7567ce5 to
f58576f
Compare
mmalerba
reviewed
May 16, 2024
| const strategy = this._overlay | ||
| .position() | ||
| .flexibleConnectedTo(this._getConnectedElement()) | ||
| .withFlexibleDimensions(false) | ||
| .withPush(false); | ||
|
|
||
| // Check breakpoint if being viewed in HandsetLandscape | ||
| const isHandsetLandscape = this._breakpointObserver |
There was a problem hiding this comment.
Isn't this a subscription object not a boolean? Also I think we need to unsubscribe / takeUntil(destroyed)
There was a problem hiding this comment.
@mmalerba Thanks for the note! I've made the change to unsubscribe in my latest commit. Let me know if it's good to go and I'll make the request to merge.
essjay05
force-pushed
the
autocomplete-landscape-listbox-a11y-fix
branch
2 times, most recently
from
30ae78e to
1c44579
Compare
essjay05
force-pushed
the
autocomplete-landscape-listbox-a11y-fix
branch
from
1c44579 to
292633d
Compare
mmalerba
reviewed
May 29, 2024
| const strategy = this._overlay | ||
| .position() | ||
| .flexibleConnectedTo(this._getConnectedElement()) | ||
| .withFlexibleDimensions(false) | ||
| .withPush(false); | ||
|
|
||
| if (!this._handsetLandscapeBreakpointSubscription) { |
There was a problem hiding this comment.
This is kind of a weird place to subscribe (as a side-effect in a getter function) can you move it to _attachOverlay right after we create _viewportSubscription
| // Apply HandsetLandscape settings to prevent overlay cutoff in that breakpoint | ||
| // Fixes b/284148377 | ||
| if (isHandsetLandscape) { | ||
| strategy.withFlexibleDimensions(true).withGrowAfterOpen(true).withViewportMargin(8); |
There was a problem hiding this comment.
do we need to unset these options if it changes back to portrait?
There was a problem hiding this comment.
Updated to set to previous default settings if isHandsetLandscape is false.
essjay05
force-pushed
the
autocomplete-landscape-listbox-a11y-fix
branch
3 times, most recently
from
6095dee to
1206e10
Compare
mmalerba
approved these changes
Jun 4, 2024
| .withGrowAfterOpen(true) | ||
| .withViewportMargin(8); | ||
| } else { | ||
| this._positionStrategy.withGrowAfterOpen(false); |
There was a problem hiding this comment.
You also need to set withFlexibleDimensions and withViewportMargin back to their original values right?
essjay05
force-pushed
the
autocomplete-landscape-listbox-a11y-fix
branch
from
0c98360 to
0d05515
Compare
…scape mode Fixes a bug in the Angular Material Autocomplete component where the autocomplete panel listbox top is cut off by the device screen when being viewed in landscape mode. This is because the listbox max-height is greater than the distance between the top of the autocomplete input and the screen top. Fixes b/284148377
…scape mode Fixes lint error from previous commit which fixes Angular Component's autocomplete panel top from being cut off when viewed in landscape mode. The previous max-height of the panel is more than the height of the panel from the top of the input when in the bottom half to the top of the device's screen. Fixes b/284148377
…pe mode Fixes a bug in the Angular Material Autocomplete component where the autocomplete panel listbox is cut off by the device screen when being viewed in landscape mode. This is because the CDK overlay does not adjust its size based on the screen constraints when triggered. Fixes b/284148377
…landscape mode Fixes a bug in the Angular Material Autocomplete component where the autocomplete panel top was being cut off by the screen in mobile landscape mode. Updates previous fix to target adjustments on HandsetLandscape only. Fixes b/284148377
…bile landscape mode Removing unnecessary comments. Fixes: b/284148377
…ests Fixes broken presubmit tests for Angular Component's Autocomplete constructor by injecting BreakpointObserver rather than adding to the constructor. Fixes b/247881646
Fixes breaking Angular Component Autocomplete comoponent's autocomplete spec.ts so that the value falls within an acceptable range based on the new behavior of the autocomplete in landscape mode. Fixes b/284148377
…e view Updates previous fix to unsubscribe from the _breakpointObserver on ngOnDestroy. Fixes b/284148377
… landscape Updates fix to autocomplete panel which was getting cut off in mobile landscape by correctly assigning const isHandsetLandscape to the subscription result.matches value and thus if isHandsetLandscape is true then applying flexible dimensions, grow after open and with viewport margin to the panel on open. Fixes b/284148377
…landscape Fixes Angular Components autocomplete so that when the panel is open in mobile landscape that it does not cut off at the top and the panel resizes/adjusts according to the viewport. Updates the previous fix to avoid subscribing to handsetLandscapeSubscription as a side effect. Fixes b/284148377
…y when not in mobile landscape Updates the previous fix which checks for Breakpoint.HandsetLandscape and applies flexibleDimensions withGrowAfterOpen and adds withViewportMargin and removes those values if Breakpoint.HandsetLandscape is false. Fixes b/284148377
essjay05
force-pushed
the
autocomplete-landscape-listbox-a11y-fix
branch
from
0d05515 to
e7d7365
Compare
essjay05
requested review from
amysorto and
andrewseguin
and removed request for
a team
… landscape Updates BreakpointObserver import after rebasing latest changes. Fixes b/284148377
andrewseguin
added
action: merge
crisbeto
pushed a commit
that referenced
this pull request
Jun 13, 2024
…scape mode (#28982) * fix(material/autocomplete): autocomplete panel top is cut off in landscape mode Fixes a bug in the Angular Material Autocomplete component where the autocomplete panel listbox top is cut off by the device screen when being viewed in landscape mode. This is because the listbox max-height is greater than the distance between the top of the autocomplete input and the screen top. Fixes b/284148377 * fix(material/autocomplete): autocomplete panel top is cut off in landscape mode Fixes lint error from previous commit which fixes Angular Component's autocomplete panel top from being cut off when viewed in landscape mode. The previous max-height of the panel is more than the height of the panel from the top of the input when in the bottom half to the top of the device's screen. Fixes b/284148377 * fix(material/autocomplete): autocomplete panel top cut off in landscape mode Fixes a bug in the Angular Material Autocomplete component where the autocomplete panel listbox is cut off by the device screen when being viewed in landscape mode. This is because the CDK overlay does not adjust its size based on the screen constraints when triggered. Fixes b/284148377 * fix(material/autocomplete): autocomplete panel top cut off in mobile landscape mode Fixes a bug in the Angular Material Autocomplete component where the autocomplete panel top was being cut off by the screen in mobile landscape mode. Updates previous fix to target adjustments on HandsetLandscape only. Fixes b/284148377 * refactor(material/autocomplete): autocomplete panel top cut off in mobile landscape mode Removing unnecessary comments. Fixes: b/284148377 * refactor(material/autocomplete): Injects Breakpoint to fix breaking tests Fixes broken presubmit tests for Angular Component's Autocomplete constructor by injecting BreakpointObserver rather than adding to the constructor. Fixes b/247881646 * fix(material/autocomplete): update style.bottom value for broken test Fixes breaking Angular Component Autocomplete comoponent's autocomplete spec.ts so that the value falls within an acceptable range based on the new behavior of the autocomplete in landscape mode. Fixes b/284148377 * fix(material/autocomplete): panel top gets cut off in mobile landscape view Updates previous fix to unsubscribe from the _breakpointObserver on ngOnDestroy. Fixes b/284148377 * fix(material/autocomplete): autocomplete panel gets cut off in mobile landscape Updates fix to autocomplete panel which was getting cut off in mobile landscape by correctly assigning const isHandsetLandscape to the subscription result.matches value and thus if isHandsetLandscape is true then applying flexible dimensions, grow after open and with viewport margin to the panel on open. Fixes b/284148377 * fix(material/autocomplete): autocomplete panel top cut off in mobile landscape Fixes Angular Components autocomplete so that when the panel is open in mobile landscape that it does not cut off at the top and the panel resizes/adjusts according to the viewport. Updates the previous fix to avoid subscribing to handsetLandscapeSubscription as a side effect. Fixes b/284148377 * fix(material/autocomplete): resets autocomplete panel positionStrategy when not in mobile landscape Updates the previous fix which checks for Breakpoint.HandsetLandscape and applies flexibleDimensions withGrowAfterOpen and adds withViewportMargin and removes those values if Breakpoint.HandsetLandscape is false. Fixes b/284148377 * refactor(material/autocomplete): autocomplete panel cut off in mobile landscape Updates BreakpointObserver import after rebasing latest changes. Fixes b/284148377 (cherry picked from commit 008212a)
This was referenced Jul 12, 2024
|
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. |
Sign up for free
to subscribe to this conversation on GitHub.
Already have an account?
Sign in.
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.
Fixes a bug in the Angular Material Autocomplete component where the autocomplete panel listbox top is cut off by the device screen when being viewed in landscape mode. This is because the listbox max-height is greater than the distance between the top of the autocomplete input and the screen top.
Fixes b/284148377