Material: mdSelect trigger programmatically

[axelson]

Is it possible to trigger showing the menu of an <md-select> programmatically?

[rschmukler]

@axelson it is currently not supported. What's your use case? Could take it up with the UX team to see if it's something that we could add support for.

[axelson]

@rschmukler My use case is making the entire <md-card> the clickable area for the select. Here's a screenshot:

[rschmukler]

@axelsonfor that use case we would recommend using css.

[axelson]

I can see how that works in some cases. But since I want to change the background color and remove the it would be very troublesome to get the backgrounds to line up exactly. Also there is text within the area that I want clickable and I don't want to mess with some sort of negative margin to show the text within a padding area.

[cah-danielmullins]

We also have a use case for this. We have a series of three md-selects. We want the first to open automatically (as it is the only actionable item on the page at that point) and then as each select is answered, we want the next in the series to open. We have achieved this with the following directive:

.directive('dashAutoopenSelect', [function () {
      return {
        restrict: 'A',
        link: function (scope, element, attr) {
          scope.$watch(attr.dashAutoopenSelect, function (value) {

            if(scope.showCategoryChoice) {
              if (value && value.length > 1) {

                // if it is disabled, defer click so ng-disabled
                // can work it's magic to enable it before the click
                if($(element).attr('disabled')) {
                  _.defer(function() {
                    element.click();
                  });
                } else {
                  element.click();
                }
              }
            }
          });
        }
      };
    }]);

But the element.click() is causing some issues (being triggered twice when the element is not disabled)

[nobarany]

Another usecase: We show a representation of the selected option. When a user needs to change it they click on that representation, and the <md-select> is shown. Currently the user has to click again to see other options.