fix(autocomplete): show dropdown on top only when there is room

[Splaktar]

PR Checklist

Please check that your PR fulfills the following requirements:

• The commit message follows our guidelines
• Tests for the changes have been added or this is not a bug fix / enhancement
• Docs have been added, updated, or were not required

PR Type

What kind of change does this PR introduce?

[x] Bugfix
[ ] Enhancement
[ ] Documentation content changes
[ ] Code style update (formatting, local variables)
[ ] Refactoring (no functional changes, no api changes)
[ ] Build related changes
[ ] CI related changes
[ ] Infrastructure changes
[ ] Other... Please describe:

What is the current behavior?

The autocomplete options panel is shown using the top position even when there is no room to display the options. More details in #10859.

Issue Number:
Related to #11626. Related to #11575. Fixes #10859.

What is the new behavior?

This reverts commit 46e08e5 which reverted the previous fix (a37f7cc) to this issue due to a regression.

Does this PR introduce a breaking change?

[ ] Yes
[x] No

Other information

At this time, this PR still causes the regression and no reproduction steps have been defined to allow us to investigate or fix the regression.

[Splaktar]

OK, @marosoft here's the information that I have for when this new calculation doesn't work.

The use case is an md-autocomplete inside of an md-dialog. The expected behavior is that the options panel will position itself using bottom and this happened before this change went in.

After this change to the calculation went in, the position is top, but the options panel is displayed below the bottom of the dialog (almost off screen).

[Splaktar]

I wasn't able to reproduce this in testing yesterday with md-autocomplete that uses md-floating-label.

Today I just learned that this issue was happening with md-chips that wrapped an md-autocomplete. I'll investigate that today.

[Splaktar]

Note that md-dropdown-position is not being set, so it's just defaulting to determining the dropdown placement based on available space in the viewport.

[Splaktar]

The issue with the dropdown being displayed below the dialog has been tracked down. This was caused by custom CSS overrides conflicting with the updated positioning. The custom CSS can be adjusted.

The remaining issue is a concern that the behavior is changing where sometimes the dropdown is displayed on top where it used to be displayed on the bottom. There appears to be some assumption that bottom should be the default, whereas AngularJS Material has always had top as the default (if there is space). I'm going to check if the spec has any guidance on this, but it may be too disruptive to change the default at this time.

[Splaktar]

The spec doesn't help us here. In an update that I think came in 2017, they moved away from popup/dropdown autocomplete design to an inline design:

We've never had any requests (afaik) to move to that new design and we don't currently plan to do so.

Miles confirmed that md-autocompletion-position="bottom" solved the issue for the affected team that wanted them to always be positioned below the input.

[Splaktar]

@jelbourn caretaker note: please check with Miles to verify that the affected team updated their app before syncing this to google3.