autocomplete: dropdown detaches on scroll when inside $mdDialog

[papb]

Bug

CodePen and steps to reproduce the issue:

CodePen which demonstrates the issue: YJZyyE

Detailed Reproduction Steps:

1. Open the md-dialog
2. Click on the autocomplete, so that the dropdown appears
3. Scroll the page

What is the expected behavior?

Either the scroll should be disabled (which is the default behavior when the md-autocomplete is not inside a md-dialog), or the scroll should happen but with the dropdown not detaching.

What is the current behavior?

The scroll happens with the dropdown menu detaching itself from the autocomplete field.

What is the use-case or motivation for changing an existing behavior?

This is bad UX

Which versions of AngularJS, Material, OS, and browsers are affected?

• AngularJS: 1.6.9
• AngularJS Material: 1.1.10
• OS: Tested in Windows
• Browsers: Tested in Chrome

[Splaktar]

From the Material Design spec on Dialogs:

Dialogs should avoid:

• Containing scrolling content

That said, we should probably still support this case. It looks like the problem is in $mdUtil.disableScrollAround(). Basically the md-dialog opens first and disables scroll on the body. Then when the md-autocomplete opens, it tries to disable scroll on the md-dialog-content but that doesn't work properly since it is shortcut by the following:

material/src/core/util/util.js

Lines 225 to 227 in ca10bd0

	if ($mdUtil.disableScrollAround._restoreScroll) {
	return $mdUtil.disableScrollAround._restoreScroll;
	}

This causes the second call's parent to never have scrolling disabled.

[Suvarnni]

I'm also facing the same issue. When this issue will be fixed ?

[Splaktar]

@Suvarnni after most of the P1 and P2 issues are fixed or a community member submits a PR to fix it. Though I will warn that this would be one of the more challenging issues for a community member to fix.

That said, if you want to investigate and provide detailed feedback and ideas towards a fix, it would help move this faster.