Vuetify: [Bug Report] v-autocomplete menu is not hiding behind mobile keyboard

[gileneusz]

Versions and Environment

Vuetify: 1.3.15
Vue: 2.5.21
Browsers: Opera
OS: Windows 7

Steps to reproduce

Open documentation example of any autocomplete on mobile device and try to use mobile keyboard to input the value

Expected Behavior

Autocomplete menu is hiding behind mobile keyboard

Actual Behavior

Autocomplete menu is showing up over mobile keyboard, making v-autocomplete and also whole screen unreadable

Reproduction Link

https://codepen.io/anon/pen/OrWZaJ?&editable=true&editors=101

[mimischi]

On a similar note, this happens on big screens too. The menu overlaps with any site content, such that it fits on the available page height. Would it be possible to make it scrollable and overflow into the bottom of the page?

[johnleider]

Workaround: https://codepen.io/johnjleider/pen/vvZZqy?&editable=true&editors=101

[johnleider]

I'm removing this from the v2.0 milestone for 2 reasons:

• 1 There is a valid workaround which disables the default behavior
• 2 I'm honestly not sure the best way to approach this

The automatic positioning is to ensure that the menu is visible. This can in some cases cause unintended side effects, especially on mobile. I'm interested in additional feedback.

[etewiah]

The codepen no longer works. Is someone able to explain what the workaround is? Thanks.

[rethab]

I implemented a simpler workaround: On mobile, I just set the maxHeight to 130 and expand to the top. This means the user sees far fewer suggestions (2-3), but the input field is still visible and scrolling is possible as well.

<v-autocomplete
  label="Please select a Timezone"
  v-model="timezone"
  :items="timezones"
  :error-messages="timezoneErrors"
  :menu-props="autocompleteMenuProps"
></v-autocomplete>

autocompleteMenuProps() {
  // default properties copied from the vuetify-autocomplete docs
  let defaultProps = {
    closeOnClick: false,
    closeOnContentClick: false,
    disableKeys: true,
    openOnClick: false,
    maxHeight: 304
  };

  if (this.$vuetify.breakpoint.smAndDown) {
    defaultProps.maxHeight = 130;
    defaultProps.top = true;
  }
  return defaultProps;
}

[bad4iz]

Possible Solution

[beshoo]

Any final fix for this?

[Sjoerd82]

I implemented a simpler workaround: On mobile, I just set the maxHeight to 130 and expand to the top. This means the user sees far fewer suggestions (2-3), but the input field is still visible and scrolling is possible as well.

<v-autocomplete
  label="Please select a Timezone"
  v-model="timezone"
  :items="timezones"
  :error-messages="timezoneErrors"
  :menu-props="autocompleteMenuProps"
></v-autocomplete>

...

Ideally, this workaround should only kick in when the keyboard obscures part of the screen, but for now I'll take it.... Also, :menuprops, should call the function, like this: :menu-props="autocompleteMenuProps()", otherwise you get an error in which Vue mentions it doesn't expect a function, but a string/array, etc.