PrimeVue Multiselect Search Box Glitch - Box Moves to the Top-Left Corner of the Screen

UI Components for Vue
Post Reply
Vondool
Posts: 2
Joined: 28 Mar 2023, 00:22

28 Mar 2023, 00:33

I am trying to create a multiselect component at run-time (not at design time). Following is the sample code I am trying.

My multiselect options:

Code: Select all

const regions = ref([
   { label: 'Queensland', value: 'QLD' },
   { label: 'New South Wales', value: 'NSW' },
   { label: 'Victoria', value: 'VIC' },
   { label: 'Tasmania', value: 'TAS' },
   { label: 'South Australia', value: 'SA' }]);
My dynamic component is created as below:

Code: Select all

const generateMultiSelectDynamically = (field: string) => {
   var el = document.createElement("div"); //create container for the app
   el.style.display = "inline"

   let selectedRegions = ref([]);
   var componentApp = createApp(
    MultiSelect, {
    maxSelectedLabels:1,
    options: regions.value,
    optionLabel:(v: any) => `${v.label}`,               
    placeholder: `region`,
    name: `region`,
    multiple:true,
    filter:true,
    modelValue: selectedRegions?.value,
    onChange: (event: any) => {
         selectedValues.value?.splice(0, selectedValues.value.length);
         event.value.forEach((element: any) => {
             selectedValues?.value?.push(element);
         });
   });

   componentApp.use(PrimeVue);  // Using PrimeVue
   componentApp.mount(el); //mount to DOM
   document.getElementById(field)!.appendChild(el);
   document.getElementById(field)!.appendChild(document.createTextNode(' '))
}
This is rendering properly.

Image

But when I start interacting with the component, then it moves to the top-left corner of the window. The two use-case scenario for this is:
  • When an entry is clicked on, then it moves.
  • When an entry is clicked on, then write something in the search box, then it moves.
For example, when I am selecting some values by mouse-clicks, and then placing some text in the search box, the component moves to the top-left corner of the screen.

Image

If I straight away start filtering in the searchbox without mouse-click, then it the control stays in place where it should be.

Image

To summarise
  • If I click on an entry, then it moves.
  • if I click on a selection, then enter something in the searchbox, then the control flies to the top-left corner.
  • If I click on the control, then enter something in the search box, then the control stays where it should be. That should be the ideal behaviour for the first scenario as well.
I am confused why the control moves to the top-left corner. Any idea?
Last edited by Vondool on 30 Mar 2023, 01:44, edited 2 times in total.

bahadirsofuoglu
Posts: 84
Joined: 06 Sep 2022, 08:59

28 Mar 2023, 16:27

Hi,
Multiselect component uses Portal. When creating a dynamic structure with Vue instance, it may not be rendered to the right place. Using the appendTo prop correctly can be the solution.

Vondool
Posts: 2
Joined: 28 Mar 2023, 00:22

29 Mar 2023, 00:34

bahadirsofuoglu wrote:
28 Mar 2023, 16:27
Hi,
Multiselect component uses Portal. When creating a dynamic structure with Vue instance, it may not be rendered to the right place. Using the appendTo prop correctly can be the solution.
Thank you bahadirsofuoglu. I tried the following:

Code: Select all

appendTo: `self`
Now the moving problem seems to be gone, but the dropdown shrank in width (so the search box is less visible) and closes once I select an element. How can I keep it open? And retain a certain width?
Image

I tried with the following props with different combinations (added them in the props section(line 2 onwards in the code above)):

Code: Select all

panelClass: "width: 500px;",
styleClass: "width: 500px;",
appendTo: `self`,
appendTo: `body`,
closeOnSelect: false
panelClass: "position: -webkit-sticky; top: 0; z-index: 100; left: 0 !important; width: 200px;",
styleClass: "position: -webkit-sticky; top: 0; z-index: 100; left: 0 !important; width: 200px;",
position: static;
position: relative;
position: absolute;
position: fixed;
position: sticky;
position: inherit;
position: initial;
position: revert;
position: revert-layer;
position: unset;
However, only panelClass and appendTo are MultiSelect props. styleClass and closeOnSelect are not. However, none of these is making any difference.

Post Reply

Return to “PrimeVue”

  • Information
  • Who is online

    Users browsing this forum: Clarazkaham and 3 guests