select: menu moves with window rather than staying put during browser resize

[mcalmus]

Bug, enhancement request, or proposal: Bug

CodePen and steps to reproduce the issue:

CodePen Demo which demonstrates the issue:

Reproducible with demo page: https://material.angularjs.org/latest/demo/select

Detailed Reproduction Steps:

1. have a select menu near bottom of screen for ease
2. Click to expand select menu
3. Drag bottom of browser window up and down

What is the expected behavior?

Browser window obscures select once past select popup

What is the current behavior?

Select popup will continue to move being pinned to bottom of windows all the way up the screen

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

This is weird, non-intuitive behavior

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

Tested with

• AngularJS: 1.7.5
• AngularJS Material: 1.1.12+
• OS: Windows 7 and 10
• Browsers: FF, IE

Is there anything else we should know? Stack Traces, Screenshots, etc.

[Splaktar]

I verified that this is not new behavior. This same behavior exists in 1.1.5, 1.1.0, and earlier.

Do you have any reference documentation that you can point to which defines the expected behavior for popups like this? WAI-ARIA, w3c, etc?

[mcalmus]

The specification at https://material.io/design/components/menus.html#exposed-dropdown-menu doesn't explicitly say not to do this, but I believe the placement section implies the dropdown should stay attached to the component that displays it. Further, native versions of this component, the material-web, and the material2 versions of this component either keep the dropdown in a position relative to the initiating component or close the dropdown when the window is sized (or scrolled).

[Splaktar]

Right, I was looking for a link to the description for the native select component that describes this specific behavior. In general, we should mimic the behavior of the native component if Material Design doesn't describe another behavior.

[codymikol]

FWIW: It looks like the default behavior of the native component is to lock scrolling until the select box is unfocused.

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/select