src/components/Dropdown.vue

@@ -29,20 +29,22 @@
         <span class="italic">{{ selected[1] }}</span>
       </div>
       <div v-else>
-        {{ selected }}
+        {{ selectedDisplay }}
       </div>
     </div>
-    <em
+    <i
       :class="['dropdown icon', { clear: clearable && selected }]"
+      aria-hidden="true"
       @click="clear"
     />
     <div :class="['menu', { 'visible transition': isOpen }]">
       <div
         v-for="(option, index) in filteredOptions || ['No results found.']"
+        :id="option.name && Array.isArray(option.name) ? option.name[0] : option.name || option"
         :key="option + index"
         :class="[
           filteredOptions ? 'item' : 'message',
-          { 'active selected': option.name === selected },
+          { 'active selected': option.name === selected || option.id === selected },
         ]"
         @click="select(index)"
       >
@@ -112,10 +114,20 @@ export default {
     placehold() {
       return this.input ? '' : this.placeholder;
     },
+
+    selectedDisplay() { // for project attributes, option are object and selected is an id
+      if (this.options[0] && this.options[0].name) {
+        const option = this.options.find(opt => opt.id === this.selected);
+        if (option) return option.name;
+      }
+      return this.selected;
+    }
   },
 
   created() {
-    this.identifier = Math.floor(Math.random() * 10000);
+    const crypto = window.crypto || window.msCrypto;
+    const array = new Uint32Array(1);
+    this.identifier = Math.floor(crypto.getRandomValues(array) * 10000);
     window.addEventListener('mousedown', this.clickOutsideDropdown);
   },
 
@@ -163,10 +175,12 @@ export default {
     },
 
     clear() {
-      if (this.clearable) {
+      if (this.clearable && this.selected) {
         this.input = '';
         this.$emit('update:selection', '');
-        if (this.isOpen) this.toggleDropdown(false);
+        if (this.isOpen) {
+          this.toggleDropdown(false);
+        }
       }
     },