Autocomplete options can be positioned outside viewport if options list changes after position has been applied #11492
Description
Bug, feature request, or proposal:
Bug
What is the expected behavior?
MatAutocomplete options should always be repositioned so they don't fall outside the viewport.
What is the current behavior?
Place a MatAutocomplete near the bottom of the viewport, initially with few enough options that
its panel will fit inside the viewport using the default bottom position. Then, bind the associated input's focus output to a function which appends more options, so that the panel won't fit inside the viewport anymore. The autocomplete's panel position won't fallback to the top position.
What are the steps to reproduce?
https://stackblitz.com/edit/angular-material2-issue-7v48o6?file=app/app.component.ts
Focus on the first input and note that the autocomplete panel is positioned correctly. Focus on the second and see that it is not.
What is the use-case or motivation for changing an existing behavior?
In my application I dynamically add autocomplete options based on the user's input.
For example, when using an autocomplete add tags the autocomplete options are made up from an API call to search existing tags for the current input value, plus a final option that represents adding the user's current input as a new tag.
When the user first focuses the tag autocomplete, the options list is empty. As soon as they type a single character, the options list is populated with the results from their search. The whole time, the user is focused on the autocomplete.
Which versions of Angular, Material, OS, TypeScript, browsers are affected?
Angular 6.0.3, Material master-e592615 (also 6.1.0).
Is there anything else we should know?
I think this is because in autocomplete-trigger, when options are changed the panel position is blindly reapplied without recomputing its dimensions. Happy to attempt a PR.