Skip to content
This repository has been archived by the owner on Sep 5, 2024. It is now read-only.

autocomplete: dropdown detaches on scroll when inside $mdDialog #11478

Open
papb opened this issue Oct 9, 2018 · 7 comments
Open

autocomplete: dropdown detaches on scroll when inside $mdDialog #11478

papb opened this issue Oct 9, 2018 · 7 comments
Assignees
Labels
needs: investigation The cause of this issue is not well understood and needs to be investigated by the team or community P2: required Issues that must be fixed. type: bug
Milestone

Comments

@papb
Copy link

papb commented Oct 9, 2018

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
@Splaktar Splaktar self-assigned this Oct 11, 2018
@Splaktar Splaktar added type: bug P3: important Important issues that really should be fixed when possible. needs: investigation The cause of this issue is not well understood and needs to be investigated by the team or community labels Nov 6, 2018
@Splaktar Splaktar added this to the 1.1.12 milestone Nov 6, 2018
@Splaktar
Copy link
Member

Splaktar commented Nov 6, 2018

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:

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

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

@Splaktar Splaktar modified the milestones: 1.1.12, 1.1.13 Jan 3, 2019
@Suvarnni
Copy link

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

@Splaktar Splaktar modified the milestones: 1.1.13, 1.1.14 Feb 10, 2019
@Splaktar Splaktar modified the milestones: 1.1.14, g3: sync Feb 15, 2019
@Splaktar
Copy link
Member

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

@stagefright5
Copy link

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

@Splaktar Splaktar added P2: required Issues that must be fixed. and removed P3: important Important issues that really should be fixed when possible. labels Aug 26, 2019
@Splaktar Splaktar modified the milestones: g3: sync, 1.1.21 Aug 26, 2019
@Byloor

This comment has been minimized.

@Splaktar Splaktar modified the milestones: 1.1.21, 1.1.22 Sep 30, 2019
@Splaktar Splaktar modified the milestones: 1.1.22, 1.1.23 Oct 22, 2019
@msd117

This comment has been minimized.

@Splaktar Splaktar modified the milestones: 1.1.23, 1.2.1 Jun 8, 2020
@Splaktar Splaktar removed this from the 1.2.1 milestone Sep 21, 2020
@Splaktar Splaktar added this to the 1.2.2 milestone Sep 21, 2020
@Splaktar Splaktar modified the milestones: 1.2.2, - Backlog Dec 16, 2020
@NZhuravlev
Copy link

A fix would be awesome!

@Splaktar Splaktar removed the g3: sync label Apr 7, 2021
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
needs: investigation The cause of this issue is not well understood and needs to be investigated by the team or community P2: required Issues that must be fixed. type: bug
Projects
None yet
Development

No branches or pull requests

7 participants