From 0a6869bff986cccaf2998830f359d7552cce9c70 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Timoth=C3=A9e=20Poussard?= <tpoussard@neogeo.fr>
Date: Wed, 6 Oct 2021 17:01:09 +0200
Subject: [PATCH] adapt dropdown with clearable option
---
src/components/Dropdown.vue | 30 +++++++++++++++++++++++++-----
src/views/feature/Feature_list.vue | 2 ++
2 files changed, 27 insertions(+), 5 deletions(-)
diff --git a/src/components/Dropdown.vue b/src/components/Dropdown.vue
index 1bef8f75..b5fdba37 100644
--- a/src/components/Dropdown.vue
+++ b/src/components/Dropdown.vue
@@ -20,7 +20,10 @@
ref="input"
/>
<div v-if="!input" class="default text">{{ selected }}</div>
- <i class="dropdown icon"></i>
+ <i
+ :class="['dropdown icon', { clear: clearable && selected }]"
+ @click="clear"
+ ></i>
<div :class="['menu', { 'visible transition': isOpen }]">
<div
v-for="(option, index) in processedOptions || ['No results found.']"
@@ -41,7 +44,14 @@
export default {
name: "Dropdown",
- props: ["options", "selected", "disabled", "search", "placeholder"],
+ props: [
+ "options",
+ "selected",
+ "disabled",
+ "search",
+ "placeholder",
+ "clearable",
+ ],
computed: {
processedOptions: function () {
@@ -71,14 +81,16 @@ export default {
methods: {
toggleDropdown(val) {
if (this.isOpen) {
- this.input = "";
+ this.input = ""; // * clear input field when closing dropdown
} else if (this.search) {
- //* put the focus on input if is a search dropdown
+ //* focus on input if is a search dropdown
this.$refs.input.focus({
preventScroll: true,
});
+ } else if (this.clearable && val.target && this.selected) {
+ this.clear(); //* clear selected and input
}
- this.isOpen = val !== undefined ? val : !this.isOpen;
+ this.isOpen = typeof val === "boolean" ? val : !this.isOpen;
},
select(index) {
@@ -96,6 +108,14 @@ export default {
);
},
+ clear() {
+ if (this.clearable) {
+ this.input = "";
+ this.$emit("update:selection", "");
+ if (this.isOpen) this.toggleDropdown(false);
+ }
+ },
+
clickOutsideDropdown(e) {
if (!e.target.closest(`#custom-dropdown${this.identifier}`))
this.toggleDropdown(false);
diff --git a/src/views/feature/Feature_list.vue b/src/views/feature/Feature_list.vue
index 875f2688..e3a00bec 100644
--- a/src/views/feature/Feature_list.vue
+++ b/src/views/feature/Feature_list.vue
@@ -94,6 +94,7 @@
:selected="form.type.selected"
:selection.sync="form.type.selected"
:search="true"
+ :clearable="true"
/>
</div>
<div class="field wide four column no-padding-mobile no-margin-mobile">
@@ -105,6 +106,7 @@
:selected="form.status.selected.name"
:selection.sync="form.status.selected"
:search="true"
+ :clearable="true"
/>
</div>
<div class="field wide four column">
--
GitLab