MDC-Select custom max-height is not handled correctly

[drcampbell]

What MDC Web Version are you using?

0.31.0

What browser(s) is this bug affecting?

All

What OS are you using?

Mac OS X, Windows

What are the steps to reproduce the bug?

Create a select input
Fill the select menu with 100 items or something reasonably large
Set the mdc-menu class to a max-height of 400px
Select a list item far down the list
Open the menu
Observe it doesn't open in the correct location

What is the expected behavior?

The menu opens over the select input.

What is the actual behavior?

The menu opens at the top of the page

Any other information you believe would be useful?

[drcampbell]

Made a pull request for this:
#2285

[moog16]

@drcampbell thanks for creating the PR. I created a (Codepen)[https://codepen.io/moog16/pen/RQJoom] to reproduce your issue. I'm just wondering if you could check it out, and see if this is the correct setup?

[drcampbell]

@moog16
Hi Moog. I modified your Codepen to demonstrate the issue clearly by just adding a margin wrapper to the top of the input:
Codepen

Selecting a fruit that is far down the list clearly illustrates it when you reopen the select.

[moog16]

@drcampbell I'm seeing this happen. Is this issue you are referring to? I just want to make sure we are looking at the same issue.

[drcampbell]

@moog16 Yep, that's the issue alright!

[moog16]

This is no longer an issue since we have moved to using only native select in #2462. Closing.

[Slion]

I landed here after searching for --mdc-menu-max-height. It does not look like that variable is working. Menu height is stuck at 120px somehow as it gets injected into the element. Fortunately I could workaround it using max-height !important.
--mdc-menu-min-width is working fine though.