Material: autocomplete: Wrong height is set for md-virtual-repeat-container

[aliai]

Hi,

When focusing on an autocomplete field, sometimes the rendered suggestion list is shrunk to show only one item, whereas there are more items on the list. This happens quite randomly, sometimes more often than this particular demo (gif):

I tried to debug this, but led to no results unfortunately. Here is my findings (sorry if it doesn't help much):

Setting a new height is triggered at VirtualRepeatController.prototype.containerUpdated when virtualRepeatUpdate_ method is called. The problem, I think, arises when the items (referred to the list of suggestions) sent to this method is an empty array.

Moreover, when the items array is correct, through the chain calls, at VirtualRepeatContainerController.prototype.autoShrink_, setSize_ method is never called, which seem to solve the problem if it did.

[manish2535]

You can reproduce this for certain if you were to scroll to get an option and then try to open the list again.

[gbaj]

This is the same issue I think-
http://codepen.io/anon/pen/LGzxyK

In the input box, hit backspace twice. You'll see the new height isn't recalculated properly.

[gbaj]

As a workaround- adding this into your getSuggestions function seems to work

this.timeout_(function() {
  var outerContainer = document.querySelector('.md-autocomplete-suggestions-container');
  var innerContainer = document.querySelector('.md-virtual-repeat-sizer');
  outerContainer.style.height = innerContainer.style.height;
});

[danazelniker]

:+1:

[mribichich]

+1

[jayeshanandani]

This seems to be related to #5611

[FME-nstokoe]

It's still happening in 1.1.1

[Venthe]

+1

[pyroflies]

Still happening.. not sure why these features are "offered" in the documentation when their basic use case functionalities are broken..

[amusto-broadsoft]

@gbaj Your suggestion worked perfectly for me.
In my case I retrieved the element containers via link and made them available via scope to my directives controller.
When my onBlur ran, I did an if check and if the suggestionContainer height was 0 I simply updated it to match the virtualRepeaterContainers height which always seemed to persist.

In my case, I identified and made available via scope in link as follows:

var suggestionsContainer = angular.element(element).find('.md-autocomplete-suggestions-container');
var virtualRepeaterContainer = angular.element(element).find('.md-virtual-repeat-sizer');

scope.suggestionsContainer = suggestionsContainer;
scope.virtualRepeaterContainer = virtualRepeaterContainer;

Then, in my directives controller during my onBlur event:

$timeout(function() {
    if ($scope.suggestionsContainer[0].style.height === '0px') {
        $scope.suggestionsContainer[0].style.height = '528px';
    }
}, 2000);

[OrganicCat]

This is still around, although I've noticed for my particular use case it was only triggering the wrong height when the list was temporarily empty, and "md-not-found" was used. When removing md-not-found I could no longer trigger a bad height. This is possibly related to being called from a remote service.

[Splaktar]

This appears to be fixed in 1.1.0 and seems to still be working properly in 1.1.7. Here's an updated CodePen for 1.1.0.

If you are seeing a similar problem against 1.1.7, please open a new issue.