md-select on hover open select options

Question

Is it possible to expand md-select on mouse hover?

For example, I want this State select to expand on mouse hover

http://codepen.io/anon/pen/vOmQgj

<md-select placeholder="State" ng-model="ctrl.userState">
        <md-option ng-repeat="state in ctrl.states" value="{{state.abbrev}}">{{state.abbrev}}</md-option>
</md-select>

Answer 1

This is not currently supported, and I sort of doubt that it will be added to the md-select component - although you should open a ticket in Github anyway with an explanation for your use-case.

It's more likely that this functionality would exist in the new md-menu component that was added today: https://material.angularjs.org/0.10.0-rc1/#/demo/material.components.menu

Either way, I'd open a Github ticket to get a discussion going.

---

That being said, I threw together a quick solution that may work for you.

Updated CodePen: http://codepen.io/robertmesserle/pen/qdmQpp

This uses the following HTML:

<md-select
    placeholder="State"
    ng-model="ctrl.userState"
    ng-mouseenter="ctrl.handleMouseEnter($event)">
  <!-- content -->
</md-select>

And the handleMouseEnter method:

this.handleMouseEnter = function (event) {
  angular.element(event.target).triggerHandler('click');
}