Material: autocomplete: dropdown detaches on scroll when inside $mdDialog

Created on 9 Oct 2018  路  6Comments  路  Source: angular/material

Bug

CodePen and steps to reproduce the issue:

CodePen which demonstrates the issue: YJZyyE

Detailed Reproduction Steps:

GIF showing issue

  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
required sync investigation bug

Most helpful comment

This is a major UX problem.
Any solution/workarounds for this is highly appreciated.

All 6 comments

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.

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

@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.

+1 Waiting for the Fix

+1 Waiting for a fix or a workaround

Was this page helpful?
0 / 5 - 0 ratings