bug([@angular/material]): Autocomplete panel should grow to left when doesn't fit viewport

[JonWallsten]

Info

Not sure if this is a bug or a feature request.
I was digging around in the code to understand what's going on. It seems like the only way on getting what I want is to use RTL instead of LTR on the overlay panel. I didn't actually change this in the code, but I did change the value in Dev Tools while running my code and it was positioned correctly. However this should be set dynamically when the Auto complete panel doesn't fit.
I also tried to change the preferredPositions to use originX=end instead of start. But it didn't change the outcome

Reproduction

https://stackblitz.com/edit/angular-material-2-yzct7d

Steps to reproduce:

1. Focus the input field and watch the Autocomplete panel

Expected Behavior

When the panel doesn't fit within the viewport's width I expect the panel to grow from right to left instead.

Actual Behavior

The box doesn't fit in the viewport

Environment

• Angular: 9.x.x
• CDK/Material: 9.x.x
• Browser(s): Chrome
• Operating System (e.g. Windows, macOS, Ubuntu): Windows

[crisbeto]

Wouldn't this cause the same issue but in the other direction? Also did you override the panel width? We have some logic that forces the panel to be the same width as the input.

[JonWallsten]

@crisbeto: Sorry, I should have mentioned that this occurs when the with is set manually. We have tables with inputs where the field can be really small, but the values can be really long. So we calculate a width based on the characters displayed in the option.

It should not be a problem if it's applied dynamically when it can't fit.

FlexibleConnectedPositionStrategy already checks if you can fit the panel:

If it can't fit it should reposition with RTL and check again.

I would have expected adding another preferredPosition would have solved this:

But I guess it only does the calculations from the right side of the host to right instead of the left side to the right, which of course will be worse.

Edit: Another thing is that it does already check if it can fit vertically below/above and change if necessary. I don't see why it shouldn't do that for left/right.

[angular-automatic-lock-bot]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}