fix(material/autocomplete): autocomplete panel top is cut off in landscape mode #28982
+27
−1
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
from
f61af54
to
30ae78e
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
essjay05
force-pushed
the
autocomplete-landscape-listbox-a11y-fix
branch
from
30ae78e
to
1c44579
Compare
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.
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