md-autocomplete closes when scrollbar is clicked, IE 11 specific

[webmandman]

@robertmesserle This issue came up many many commits ago here #1739

I updated from 0.8.3 to 0.11.0 just two days ago and it continued to work on Chrome but on IE 11(edge) it is closing again when you click on the scrollbars.

I've seen this occasionally happen in Chrome on Windows when dragging the scrollbar. Couldn't figure out a reliable set of repro steps.

[hillerstorm]

This was mentioned a while back without any response at all: #4625

Update: Actually, for me it is md-select with the problem..

[vladimir-ivanov]

Experiencing the same problem,
it is happening because of ng-blur is triggered (in IE11 only) - calls function blur() and hides the autocomplete.
The underlying reason for that is how IE handles the blur / focus events:
http://www.barryvan.com.au/2009/01/onfocus-and-onblur-for-divs-in-fx/

ok, the fix is to move a couple of lines of code

          ng-mouseenter="$mdAutocompleteCtrl.listEnter()"\
          ng-mouseleave="$mdAutocompleteCtrl.listLeave()"\  defined in AutocompleteCtrl template <ul> element  - need to be moved one level up to md-virtual-repeat-container

overall result is:

 <md-virtual-repeat-container\
          md-auto-shrink\
          md-auto-shrink-min="1"\
          ng-mouseenter="$mdAutocompleteCtrl.listEnter()"\
          ng-mouseleave="$mdAutocompleteCtrl.listLeave()"\
          ng-hide="$mdAutocompleteCtrl.hidden && !$mdAutocompleteCtrl.notFoundVisible()"\
          class="md-autocomplete-suggestions-container md-whiteframe-z1"\
          role="presentation">\
        <ul class="md-autocomplete-suggestions"\
            ng-class="::menuClass"\
            id="ul-{{$mdAutocompleteCtrl.id}}"\
            ng-mouseup="$mdAutocompleteCtrl.mouseUp()">\
          <li md-virtual-repeat="item in $mdAutocompleteCtrl.matches"\
              ng-class="{ selected: $index === $mdAutocompleteCtrl.index }"\
              ng-click="$mdAutocompleteCtrl.select($index)"\
              md-extra-name="$mdAutocompleteCtrl.itemName">\
              ' + itemTemplate + '\
              </li>' + noItemsTemplate + '\
        </ul>\
      </md-virtual-repeat-container>\

will try to do a pull request for it

[paulflo150]

How about:

1. Moving the events to md-virtual-repeat-container from ul since this is where the scrollbar is:

<md-virtual-repeat-container\
              md-auto-shrink\
              md-auto-shrink-min="1"\
              ng-hide="$mdAutocompleteCtrl.hidden && !$mdAutocompleteCtrl.notFoundVisible()"\
              class="md-autocomplete-suggestions-container md-whiteframe-z1"\
              ng-mouseenter="$mdAutocompleteCtrl.listEnter()"\
              ng-mouseleave="$mdAutocompleteCtrl.listLeave()"\
              ng-mouseup="$mdAutocompleteCtrl.mouseUp()"\

2 Add a scroll event which sets focus on the input.

function gatherElements() {
                ......
                elements.$.scroller.on('scroll', onScroll);
            }

function onScroll() {
                elements.input.focus()
            }

[JustACodeMonkey]

+1 still broken on IE11 with version 0.11.2

[foxx9]

+1

[nipuna-perera]

+1 still not working in 1.0.0-rc1