Position of dropdown popper is fixed when the reference element's height is dynamically changed

[quynhethereal]

Hi there,

Thank you for your hard work on the project. I have a few questions that I was hoping you could clarify for me.

The issue I'm currently working on a project that involves using Vue with the VDropdown component. However, I've encountered a problem where the dropdown position does not update when the height of the reference element changes dynamically. In my specific case:

• The reference element has a CSS-defined max-height of 100px.
• The height of the reference element varies based on its content.
• I want the dropdown position to recalculate whenever the height of the reference element changes.

Unfortunately, it seems that the popper remains fixed to its initial position and does not respond to the dynamic height changes of the reference element at all.

Video

https://github.com/Akryum/floating-vue/assets/49337640/85ed9044-5343-4cc9-b2db-750802bd99ac

Reproducible code sandbox https://codesandbox.io/s/floating-vue-dynamic-height-reference-element-zdrr8p?file=/src/App.vue

I'm wondering if you have any insights into resolving this problem. I came across the autoUpdate feature from floating-ui (https://floating-ui.com/docs/autoupdate) and was considering whether setting up an event listener with autoUpdate could be the solution.

Thank you in advance.

[or2e]

@quynhethereal As a temporary solution, I can offer this hack.

addDummyText() {
  this.dummyTexts.push(this.getRandomText());

  this.$nextTick().then(() => {
      window.dispatchEvent(new Event("resize"));
  });
}

if you found it helpful, please vote for this issue