Dropdown Misalignment When Tags Wrap in Multi-Select Mode

[dan-dazlab]

Bug Report: Dropdown Misalignment When Tags Wrap in Multi-Select Mode

https://jsfiddle.net/ewaL8m0n/5

Environment

• @vueform/multiselect version: 2.6.11
• Vue version: 3.5.22
• Browser: Google Chrome 141
• OS: macOS 24.6.0

Description

When using mode="tags" with appendToBody="true", the dropdown position becomes misaligned when selected tags cause the input field to grow (wrap to multiple lines). The dropdown remains in its originally calculated position instead of repositioning relative to the expanded input field.

Steps to Reproduce

1. Create a Multiselect component with the following configuration:
   • mode="tags"
   • appendToBody="true"
   • Multiple selectable options
2. Open the dropdown and select multiple items (enough to cause tag wrapping)
3. Observe that as tags wrap to new lines and the input field grows vertically, the dropdown remains anchored to the original position

Expected Behavior

The dropdown should dynamically reposition itself to remain properly aligned with the input field as tags wrap and the field height increases.

Actual Behavior

The dropdown remains fixed at its initial calculated position, causing visual misalignment between the input field and dropdown menu.

Code Example

<Multiselect
  v-model="selectedForms"
  :options="options"
  mode="tags"
  :appendToBody="true"
  :searchable="true"
  :closeOnSelect="false"
/>

Visual Example

Related Issues

Similar issues have been reported in other component libraries:

• Telerik UI: https://feedback.telerik.com/wpf/1380543-dropdown-position-in-multiple-select
• Atlaskit UserPicker: Dropdown misalignment with dynamic parent sizes

Suggested Fix

The component should observe the wrapper element's size changes (using ResizeObserver) and trigger a repositioning calculation when dimensions change while the dropdown is open.