diff --git a/src/components/Dropdown.vue b/src/components/Dropdown.vue index 1bef8f75d95a1ef74aa16cba18c22baf0791cda9..b5fdba37b2a3722e42bd89a9387a48e9158ec9c8 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 875f26881acfdaa661b329806197baa587022db8..e3a00becaca16bd1cc5da1d588fb6d0789146b03 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">