I have an angular material app in which I have a button that triggers a dialog box with a dropdown in it. If the button is at the top, everything works fine and as expected.

If the button is towards the bottom so the user has to scroll to get to it, however, once the dropdown is hit, the page jumps back to the top. The dialog box stays open at the bottom and I can't scroll down to it or click out of it, so I have to reload the page to do anything and the dialog box is useless.

If I use

<select ng-options="opt.val as opt.name for opt in options" ng-model="d"></select>

then it works fine.

But if I use a md-select

<md-select ng-model="d">
    <md-option ng-value="opt.val" ng-repeat="opt in options">{{opt.name}}</md-option>
</md-select>

then it breaks.

jsfiddle: /

If you scroll all the way to the bottom of the output, click a button, then try to open the dropdown, you can see the issue.

Is there any way to avoid this?

I have an angular material app in which I have a button that triggers a dialog box with a dropdown in it. If the button is at the top, everything works fine and as expected.

If the button is towards the bottom so the user has to scroll to get to it, however, once the dropdown is hit, the page jumps back to the top. The dialog box stays open at the bottom and I can't scroll down to it or click out of it, so I have to reload the page to do anything and the dialog box is useless.

If I use

<select ng-options="opt.val as opt.name for opt in options" ng-model="d"></select>

then it works fine.

But if I use a md-select

<md-select ng-model="d">
    <md-option ng-value="opt.val" ng-repeat="opt in options">{{opt.name}}</md-option>
</md-select>

then it breaks.

jsfiddle: https://jsfiddle/st3m3x0g/3/

If you scroll all the way to the bottom of the output, click a button, then try to open the dropdown, you can see the issue.

Is there any way to avoid this?

• javascript
• html
• angularjs
• dialog
• material-design

2 Answers 2

This functionality not working in angular material v0.9.8, actually i need a functionality on a dialog box when i click outside the box it should hide in v 0.9.8 of angular material.

This has been fixed in v0.9.0

See issue 1648 for further details.