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' }]);
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(' '))
}
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.
If I straight away start filtering in the searchbox without mouse-click, then it the control stays in place where it should be.
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.