Material: autocomplete: dropdown always uses max-height when md-not-found is used

[papb]

Bug, enhancement request, or proposal: Bug

CodePen and steps to reproduce the issue:

CodePen Demo which demonstrates the issue: pOJMKB

Detailed Reproduction Steps:

1. Open this codepen
2. Click on the autocomplete
3. Type "F"

What is the expected behavior?

The dropdown should have height 48px

What is the current behavior?

The dropdown has height 240px (as if there were five results)

What is the use-case or motivation for changing an existing behavior?

The current behaviour is ugly and therefore bad UI/UX.

Which versions of AngularJS, Material, OS, and browsers are affected?

• AngularJS: 1.6.9
• AngularJS Material: 1.1.10
• OS: Tested in windows but probably has the same problem on all
• Browsers: Tested in Chrome but probably has the same problem on all

Is there anything else we should know? Stack Traces, Screenshots, etc.

As shown by the GIF I included above, after performing the following steps, the autocomplete gets the height correct:

1. Open the same codepen I mentioned above
2. Click on the autocomplete
3. Type "F"
4. Observe the problem
5. Click outside
6. Click on the autocomplete again
7. Press backspace
8. Type "F" - Now it gets it right. Interestingly though, it is possible to see a scrollbar flashing on the right with height 48px, which is still ugly but less ugly than the initial problem.

Also, for those looking for a quick fix, I used an ugly hack: inside the getSearchValues() function I calculate the correct height (which is 48 * numberOfResults) and force the height of the container using javascript. See it working on this other codepen:

function fixBug(amountOfResults) {
    function getLastElement(selector) {
        const all = Array.prototype.slice.call(document.querySelectorAll(selector));
        return all[all.length - 1];
    }
    setTimeout(() => {
        const container = getLastElement("md-virtual-repeat-container");
        const scroller = getLastElement("div.md-virtual-repeat-scroller");
        const sizer = getLastElement("div.md-virtual-repeat-sizer");
        const offsetter = getLastElement("div.md-virtual-repeat-offsetter");
        const height = 48 * amountOfResults + "px";
        container.style.height = height;
        scroller.style.height = height;
        sizer.style.height = height;
        offsetter.style.height = height;
    }, 0);
}

Note: I know I am using the autocomplete in a slightly unusual fashion (with the "type to search" thing and the "too many" thing) but I believe this constitutes a bug regardless.

[Splaktar]

I can reproduce this issue. It only happens with md-not-found. Currently this causes the dropdown panel to have max-height: 227px and height: 100%, but it does not set a min-height: 48px so the browser seems to always be using the max-height even when not needed.

In my brief testing, setting min-height: 48px on .md-virtual-repeat-container.md-autocomplete-suggestions-container and removing the height: 100% solves this. But this breaks the ability for the dropdown panel to expand when there is a full set of matches.

I wonder if using Flexbox could help us here...

[papb]

Thanks for the quick reply. I'm afraid I can't help with fixing it, my CSS knowledge is not so deep. Good luck to you or whoever takes this :) Thanks for taking the time.

[papb]

I noticed now that this is directly related to #6668