Skip to content
Snippets Groups Projects
Commit e1d4d165 authored by Timothee P's avatar Timothee P :sunflower:
Browse files

close dropdown at click anywhere else & at select

parent b4c02d89
No related branches found
No related tags found
No related merge requests found
<template> <template>
<div <div
id="custom-dropdown"
:class="[ :class="[
'ui fluid search selection dropdown', 'ui fluid search selection dropdown',
{ 'active visible': isOpen }, { 'active visible': isOpen },
...@@ -62,12 +63,14 @@ export default { ...@@ -62,12 +63,14 @@ export default {
}; };
}, },
methods: { methods: {
toggleDropdown(){ toggleDropdown() {
this.isOpen = !this.isOpen this.isOpen = !this.isOpen;
}, },
select(index) { select(index) {
this.input = ""; this.input = "";
this.isOpen = false; // * ne marche pas, car toggle dropdown est rappelé au même moment :-( setTimeout(() => {
this.isOpen = false; // * quick & dirty, car toggle dropdown est rappelé plusieurs fois aileurs, à creuser...
}, 500);
this.$emit("update:selection", this.options[index]); this.$emit("update:selection", this.options[index]);
}, },
searchOptions(options) { searchOptions(options) {
...@@ -86,6 +89,17 @@ export default { ...@@ -86,6 +89,17 @@ export default {
this.isOpen = true; this.isOpen = true;
this.clearSelected(); this.clearSelected();
}, },
clickOutsideDropdown(e) {
if (!e.target.closest("#custom-dropdown")) this.isOpen = false;
},
},
created() {
window.addEventListener("mousedown", this.clickOutsideDropdown);
},
beforeDestroy() {
window.removeEventListener("mousedown", this.clickOutsideDropdown);
}, },
}; };
</script> </script>
\ No newline at end of file
...@@ -10,8 +10,8 @@ const feature_type = { ...@@ -10,8 +10,8 @@ const feature_type = {
geom_type: "point", geom_type: "point",
title: "Éolienne", title: "Éolienne",
is_editable: true, is_editable: true,
slug: "2-Éolienne", slug: "1-Éolienne",
feature_type: "2" feature_type: "1"
}, },
{ {
geom_type: "linestring", geom_type: "linestring",
......
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment