[Bug Report] [v-autocomplete] Wrong menu position on items change if it is already open

[alessandrome-sinerbit]

Environment

Vuetify Version: 2.2.8
Vue Version: 2.6.11
Browsers: Chrome 79.0.3945.117
OS: Mac OS 10.15.2

Steps to reproduce

While the autocomplete menu is open and items of the autocomplete change (in the example from empty array to a 5 elements array), the menu doesn't change position until I close and re-open it.

Expected Behavior

I expect that after the item list of the autocomplete change, it will adjust the dropdown menu position, also if it already open

Actual Behavior

Position of dropdown position doesn't change until the dropdown menu is not reopened

Reproduction Link

https://codepen.io/alessandro-mesti-sinerbit/pen/ZEYNyjW?editors=1010

[jacekkarczmarczyk]

That has nothing to do with auto or default styles https://codepen.io/jkarczm/pen/XWJvVZM?editors=1010

[johnleider]

Then I'll need some additional information.

[alessandrome-sinerbit]

in the demo code snippet I posted, during item loading the selected autocomplete correctly show a dropdown menu on top of the component:

When item loading is completed. the dropdown menu of focused autocomplete doesn't change position, allowing the dropdown menu to overflow the normal screen dimension:

If I deselect and refocus the autocomplete, the dropdown, closing and reopening itself, change position on top of the autocomplete, avoiding to go off-screen:

[reza-akbari]

calling updateMenuDimensions after updating the items seems to fix the issue

[jacekkarczmarczyk]

That won't for v-select though, it has the same problem

[helderhernandez]

I managed to solve this problem in the following way:
Clean the list on each request

watch: {
      async search(val) {
        this.items = []; // important 🤓 
        this.items = await this.fetchDataFromApi();
    },
  },

[ricardovanlaarhoven]

I managed to solve this problem in the following way: Clean the list on each request

watch: {
      async search(val) {
        this.items = []; // important 🤓 
        this.items = await this.fetchDataFromApi();
    },
  },

Doesn't seem to work in my case. I already had a clear on my items but doesn't seem to fix it.

[davidbielik]

My workaround:

<v-autocomplete ref="autocomplete" :items="items">

computed: {
    items() { ... },
},
watch: {
    items: {
      deep: true,
      handler() {
        this.$nextTick(() => {
          this.$refs.autocomplete.updateMenuDimensions();
        });
      },
    },
  },

[johnleider]

This Issue is being closed due to inactivity.

If you have any questions, please reach out to us in our Discord community.

[AleksanderGjinollari]

I don't know if this will work for you, but adding the attach prop to v-autocomplete solved it for me.

<v-autocomplete
  :attach="true"