One of the challenges I'm facing is with a dropdown component that is used multiple times on a single page. Each dropdown contains various options, allowing users to select more than one option at a time.
The issue arises when the page refreshes after selecting an option, causing the dropdown to close. This means that the user has to repeatedly open the dropdown every time they want to choose another option.
I am looking for a solution that will keep the selected dropdown open even after refreshing the page, ensuring a seamless user experience.
The visibility of the dropdown is controlled by the this.show value. By setting it to true in the mounted() function, all dropdowns are displayed initially. However, I only want the previously open dropdown to remain open upon reloading the page.
Here is the code for the Dropdown component:
<template>
<div
v-on-click-outside="collapse"
class="dropdown"
:class="{ expanded: show, collapsed: !show}"
>
<div
class="dropdown__info"
@click="onClick()"
>
<span>
{{ getFilterTitle() }}
</span>
</div>
<transition name="expand">
<div
v-if="show"
class="dropdown__options"
>
<template v-for="(option, m) in filteredOptions">
<template v-else>
<div
:key="option.value"
:class="{
selected: isSelected(option)
}"
:show="m < 10"
class="dropdown__options__item"
:title="option.title"
@click="onSelect(option)"
>
{{ option.label }}
</div>
</template>
</template>
</div>
</transition>
</div>
</template>
Below are the functions used in the Dropdown component:
data() {
return {
show: false
};
},
methods: {
onClick() {
if (this.show) {
this.collapse();
} else {
this.expand();
}
},
expand() {
this.show = true;
},
collapse() {
if (!this.show) {
return;
}
this.show = false;
},
onSelect(option) {
const selectedIndex = this.selectedList.findIndex(
(selectedOption) => option.value === selectedOption.value,
);
const clonedSelectedList = JSON.parse(JSON.stringify(this.selectedList));
if (selectedIndex > -1) {
clonedSelectedList.splice(selectedIndex, 1);
} else {
clonedSelectedList.push(option);
}
this.selectedList = [...clonedSelectedList];
this.onChange({
title: this.title,
name: this.name,
value: this.selectedList,
});
}
}
Is there a way to maintain the visibility of the dropdown after selection so that users can easily choose multiple options without having to reopen the dropdown each time?