From e91039e08905ee4d33365b2a9f603240278295d2 Mon Sep 17 00:00:00 2001
From: Gift <geezyenyoghasim@gmail.com>
Date: Thu, 23 Jun 2022 16:56:08 +0100
Subject: [PATCH] feat : added the watch method on the function to make sure
 that the selected uption is updated anytime there is a delay in the incomming
 value of the selected prop

---
 Dropdown.vue | 179 ++++++++++++++++++++++++++++-----------------------
 1 file changed, 98 insertions(+), 81 deletions(-)

diff --git a/Dropdown.vue b/Dropdown.vue
index 7ca56c3..72545b4 100644
--- a/Dropdown.vue
+++ b/Dropdown.vue
@@ -1,89 +1,105 @@
 <template>
-    <div class="btn-group">
-        <li @click="toggleMenu()" class="dropdown-toggle" v-if="selectedOption.name !== undefined">
-          {{ selectedOption.name }}
-          <span class="caret"></span>
-        </li>
-
-        <li @click="toggleMenu()" class="dropdown-toggle dropdown-toggle-placeholder" v-if="selectedOption.name === undefined">
-          {{placeholderText}}
-          <span class="caret"></span>
-        </li>
-
-        <ul class="dropdown-menu" v-if="showMenu">
-            <li v-for="(option, idx) in options" :key="idx">
-                <a href="javascript:void(0)" @click="updateOption(option)">
-                    {{ option.name }}
-                </a>
-            </li>
-        </ul>
-    </div>
+  <div class="btn-group">
+    <li
+      @click="toggleMenu()"
+      class="dropdown-toggle"
+      v-if="selectedOption.name !== undefined"
+    >
+      {{ selectedOption.name }}
+      <span class="caret"></span>
+    </li>
+
+    <li
+      @click="toggleMenu()"
+      class="dropdown-toggle dropdown-toggle-placeholder"
+      v-if="selectedOption.name === undefined"
+    >
+      {{ placeholderText }}
+      <span class="caret"></span>
+    </li>
+
+    <ul class="dropdown-menu" v-if="showMenu">
+      <li v-for="(option, idx) in options" :key="idx">
+        <a href="javascript:void(0)" @click="updateOption(option)">
+          {{ option.name }}
+        </a>
+      </li>
+    </ul>
+  </div>
 </template>
 
 <script>
-    export default {
-        data() {
-            return {
-                selectedOption: {
-                  name: '',
-                },
-                showMenu: false,
-                placeholderText: 'Please select an item',
-            }
-        },
-        props: {
-            options: {
-                type: [Array, Object]
-            },
-            selected: {},
-            placeholder: [String],
-            closeOnOutsideClick: {
-              type: [Boolean],
-              default: true,
-            },
-        },
-
-        mounted() {
-            this.selectedOption = this.selected;
-            if (this.placeholder)
-            {
-                this.placeholderText = this.placeholder;
-            }
-
-            if (this.closeOnOutsideClick) {
-              document.addEventListener('click', this.clickHandler);
-            }
-        },
-
-        beforeDestroy() {
-            document.removeEventListener('click', this.clickHandler);
-        },
-
-        methods: {
-            updateOption(option) {
-                this.selectedOption = option;
-                this.showMenu = false;
-                this.$emit('updateOption', this.selectedOption);
-            },
-
-            toggleMenu() {
-              this.showMenu = !this.showMenu;
-            },
-
-            clickHandler(event) {
-                const { target } = event;
-                const { $el } = this;
-
-                if (!$el.contains(target)) {
-                  this.showMenu = false;
-                }
-            },
-        }
+export default {
+  data() {
+    return {
+      selectedOption: {
+        name: "",
+      },
+      showMenu: false,
+      placeholderText: "Please select an item",
+    };
+  },
+  props: {
+    options: {
+      type: [Array, Object],
+    },
+    selected: {},
+    placeholder: [String],
+    closeOnOutsideClick: {
+      type: [Boolean],
+      default: true,
+    },
+  },
+
+  mounted() {
+    this.selectedOption = this.selected;
+    if (this.placeholder) {
+      this.placeholderText = this.placeholder;
+    }
+
+    if (this.closeOnOutsideClick) {
+      document.addEventListener("click", this.clickHandler);
     }
+  },
+
+  beforeDestroy() {
+    document.removeEventListener("click", this.clickHandler);
+  },
+
+  methods: {
+    updateOption(option) {
+      this.selectedOption = option;
+      this.showMenu = false;
+      this.$emit("updateOption", this.selectedOption);
+    },
+
+    toggleMenu() {
+      this.showMenu = !this.showMenu;
+    },
+
+    clickHandler(event) {
+      const { target } = event;
+      const { $el } = this;
+
+      if (!$el.contains(target)) {
+        this.showMenu = false;
+      }
+    },
+  },
+  watch: {
+    selected: {
+      handler(newValue) {
+        if (!this?.selectedOption?.name?.trim()) {
+          this.selectedOption = newValue;
+        }
+      },
+      deep: true,
+    },
+  },
+};
 </script>
 
 <style>
-
 .btn-group {
   min-width: 160px;
   height: 40px;
@@ -104,7 +120,8 @@
   font-weight: 300;
   margin-bottom: 7px;
   border: 0;
-  background-image: linear-gradient(#009688, #009688), linear-gradient(#D2D2D2, #D2D2D2);
+  background-image: linear-gradient(#009688, #009688),
+    linear-gradient(#d2d2d2, #d2d2d2);
   background-size: 0 2px, 100% 1px;
   background-repeat: no-repeat;
   background-position: center bottom, center calc(100% - 1px);
@@ -153,7 +170,7 @@
 }
 .dropdown-menu > li > a:hover {
   background: #efefef;
-  color: #409FCB;
+  color: #409fcb;
 }
 
 .dropdown-menu > li {
@@ -178,6 +195,6 @@
 }
 
 li {
-    list-style: none;
+  list-style: none;
 }
 </style>