Material: autocomplete: shows dropdown on top even when there is no room

[begemott]

Actual Behavior:

• What is the issue? *
  Sometimes the autocomplete dropdown will be shown at the top of an input, partially out of the screen, but it should be bottom position in this case.

CodePen (or steps to reproduce the issue): *

• CodePen Demo which shows your issue: https://codepen.io/dumchikov/pen/zdRrYO

Steps to reproduce

• The md-autocomplete should not have md-dropdown-position (position should be determined automatically)
• The md-autocomplete's input should be placed below the screen, so the window should be scrolled to see the input.
• Scroll the window until the md-autocomplete's input gets the top of the window
• Focus the input
• The autocomplete dropdown will be shown at the top of input partially out of the screen, but should be at the input's bottom

AngularJS Versions: *

• AngularJS Version: 1.5.5
• AngularJS Material Version: 1.1.4

Additional Information:

• Browser Type: * Chrome, FF, IE
• Browser Version: * Chrome - 60.0.3112.90, FF - 54.0.1, IE - 11
• OS: * Window 7

Another issue reproduced on FF and IE only - after closing the dropdown the window is scrolled to the window top.

[AkhilNaidu09]

I have a work around for the last point (winodw is scrolling to top after closing drop down)

Issue : _Another issue reproduced on FF and IE only - after closing the dropdown the window is scrolled to the window top._

_:-ms-input-placeholder, :root {
  body[style] {
    position: inherit !important;
    top: inherit !important;
    width: inherit !important;
  }

  .md-click-catcher.md-wbTheme-theme {
    height: 100%;
    position: fixed;
    width: 100%;
  }
}

[AkhilNaidu09]

If you want to open options list always downwards, this is the workaround we have up to now.

open angular-material.js file

change shouldOpenAroundTarget to True,

function calculateMenuPositions(scope, element, opts) {
      var
        containerNode = element[0],
        targetNode = opts.target[0].children[0], // target the label
        parentNode = $document[0].body,
        selectNode = opts.selectEl[0],
        contentNode = opts.contentEl[0],
        parentRect = parentNode.getBoundingClientRect(),
        targetRect = targetNode.getBoundingClientRect(),
         shouldOpenAroundTarget = true,

[alexthewilde]

Another effective workaround is to simply use md-dropdown-position="bottom".

[areeb5]

this way is justing putting the dropdown elements below the control(md-autocomplete), but that list is very compact, hardly only 2items is showing as i have attached snapshot, kindly any one help me in this,
i have also applied css to body hard coded (height:auto !important;) but that also disturbing the scroll of application.

[Splaktar]

The window jumping to the top on selection has been fixed. Updated CodePen showing the fix in 1.1.7.

But the popup is still displaying on top, even when there is no room on the screen to display it. It also disables the window's scroll, so you can't scroll up without closing the popup. If a hard coded md-dropdown-position is not defined, it should choose the option which fits the popup the best.

[Suvarnni]

in which release we can expect this issue fix, because I'm facing a similar issue like this in IE11 browser.

[Splaktar]

@Suvarnni we would like to get it into 1.1.12. If you are interested in taking a shot at fixing it, I can help review your PR.

[balajiprasadb]

Hi @Splaktar, I'm facing the same issue. When can we expect this to be fixed?

[marosoft]

Hi @Splaktar

The problem is with top and bottom values of root being negative:

I made some changes to fix the problem. Please check this CodePen. I am displaying some debug data in the console.

These are my code changes:

This is a code line I changed.

top and bottom values of vrect are relative to the viewport.

[Splaktar]

@marosoft thank you for looking into that. The fix looks good to me. Please submit a PR.

[Splaktar]

The fix for this was reverted in PR https://github.com/angular/material/pull/11626 due to a regression that it caused.

PR https://github.com/angular/material/pull/11629 has been posted to bring this fix back, but it still needs reproduction steps for the regression before it can be investigated and fixed.