Disabled select input fixes (#355)

client/components/forms/components/VSelect.vue

@@ -2,11 +2,9 @@
   <div class="v-select relative" :class="[{ 'w-0': multiple, 'min-w-full': multiple }]" ref="select">
     <span class="inline-block w-full rounded-md">
       <button type="button" aria-haspopup="listbox" aria-expanded="true" aria-labelledby="listbox-label"
-              class="cursor-pointer"
+        class="cursor-pointer" :style="inputStyle"
-              :style="inputStyle"
         :class="[theme.SelectInput.input, { 'py-2': !multiple || loading, 'py-1': multiple, '!ring-red-500 !ring-2 !border-transparent': hasError, '!cursor-not-allowed !bg-gray-200': disabled }, inputClass]"
-              @click="toggleDropdown"
+        @click="toggleDropdown">
-      >
         <div :class="{ 'h-6': !multiple, 'min-h-8': multiple && !loading }">
           <transition name="fade" mode="out-in">
             <Loader v-if="loading" key="loader" class="h-6 w-6 text-nt-blue mx-auto" />
@@ -16,8 +14,7 @@
             <div v-else key="placeholder">
               <slot name="placeholder">
                 <div class="text-gray-400 dark:text-gray-500 w-full text-left truncate pr-3"
-                     :class="{'py-1': multiple && !loading}"
+                  :class="{ 'py-1': multiple && !loading }">
-                >
                   {{ placeholder }}
                 </div>
               </slot>
@@ -32,17 +29,12 @@
       </button>
     </span>
     <collapsible v-model="isOpen" @click-away="onClickAway"
-                 class="absolute mt-1 rounded-md bg-white dark:bg-notion-dark-light shadow-xl z-10"
+      class="absolute mt-1 rounded-md bg-white dark:bg-notion-dark-light shadow-xl z-10" :class="dropdownClass">
-                 :class="dropdownClass"
-    >
       <ul tabindex="-1" role="listbox"
         class="rounded-md text-base leading-6 shadow-xs overflow-auto focus:outline-none sm:text-sm sm:leading-5 relative"
-          :class="{'max-h-42 py-1': !isSearchable,'max-h-48 pb-1': isSearchable}"
+        :class="{ 'max-h-42 py-1': !isSearchable, 'max-h-48 pb-1': isSearchable }">
-      >
         <div v-if="isSearchable" class="px-2 pt-2 sticky top-0 bg-white dark-bg-notion-dark-light z-10">
-          <text-input v-model="searchTerm" name="search" :color="color" :theme="theme"
+          <text-input v-model="searchTerm" name="search" :color="color" :theme="theme" placeholder="Search..." />
-                      placeholder="Search..."
-          />
         </div>
         <div v-if="loading" class="w-full py-2 flex justify-center">
           <Loader class="h-6 w-6 text-nt-blue mx-auto" />
@@ -51,8 +43,7 @@
           <li v-for="item in filteredOptions" :key="item[optionKey]" role="option" :style="optionStyle"
             :class="{ 'px-3 pr-9': multiple, 'px-3': !multiple }"
             class="text-gray-900 cursor-default select-none relative py-2 cursor-pointer group hover:text-white hover:bg-form-color focus:outline-none focus-text-white focus-nt-blue"
-              @click="select(item)"
+            @click="select(item)">
-          >
             <slot name="option" :option="item" :selected="isSelected(item)" />
           </li>
         </template>
@@ -62,8 +53,7 @@
         <li v-if="allowCreation && searchTerm" role="option" :style="optionStyle"
           :class="{ 'px-3 pr-9': multiple, 'px-3': !multiple }"
           class="text-gray-900 cursor-default select-none relative py-2 cursor-pointer group hover:text-white hover:bg-form-color focus:outline-none focus-text-white focus-nt-blue"
-            @click="createOption(searchTerm)"
+          @click="createOption(searchTerm)">
-        >
           Create <b class="px-1 bg-gray-300 rounded group-hover-text-black">{{ searchTerm }}</b>
         </li>
       </ul>
@@ -176,8 +166,9 @@ export default {
     toggleDropdown() {
       if (this.disabled) {
         this.isOpen = false
-      }
+      } else {
         this.isOpen = !this.isOpen
+      }
       if (!this.isOpen) {
         this.searchTerm = ''
       }