material
material copied to clipboard
angular
autocomplete: dropdown detaches on scroll when inside $mdDialog
Bug
CodePen and steps to reproduce the issue:
CodePen which demonstrates the issue: YJZyyE
Detailed Reproduction Steps:
- Open the md-dialog
- Click on the autocomplete, so that the dropdown appears
- 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
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:
https://github.com/angular/material/blob/ca10bd0b2e12d9244e3e6741b8f8d3600f081d39/src/core/util/util.js#L225-L227
This causes the second call's parent to never have scrolling disabled.
@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.
This is a major UX problem. Any solution/workarounds for this is highly appreciated.
