How to Open the Vue MultiSelect Popup to a Specific Target Element Instead of the Body

By default, the Vue MultiSelect popup attaches itself to the body of the document when it opens. If you want more control over where the popup is rendered, you can easily redirect it to a specific target element. This is especially useful when you want to keep the popup confined within a particular section of the page.

We’ll use the open event of the MultiSelect component to access the popup and then move it to the desired element using the appendChild method. Additionally, we will adjust the popup’s position style to ensure proper rendering inside the new target.

Here’s the complete Vue component that demonstrates this approach:

<template>
  <div id="multiselect_popup_target">
    <ejs-multiselect
      id="sample-list1"
      :dataSource="sportsData"
      :open="(args) => onOpen(args, '#multiselect_popup_target')"
      :mode="defaultMode"
      :placeholder="waterMark"
    ></ejs-multiselect>
  </div>
</template>

<script>
import { MultiSelectComponent } from '@syncfusion/ej2-vue-dropdowns';
import data from './dataSource.json';

export default {
  components: {
    'ejs-multiselect': MultiSelectComponent,
  },
  data: function () {
    return {
      waterMark: 'Favorite Sports',
      sportsData: data['sportsData'],
    };
  },
  methods: {
    onOpen(args, target) {
      setTimeout(() => {
        const popupTarget = document.querySelector(target);
        popupTarget.appendChild(args.popup.element);
        args.popup.element.style.position = 'static';
      });
    },
  },
};
</script>

This approach provides control over where the popup is displayed, allowing for more customization and flexibility in your layouts. You can find a sample implementation here.