fix: wrong use of teleport

fix: #180
soc221b · May 4, 2021 · 49b8775 · 49b8775
1 parent 6336be5
commit 49b8775
Showing 1 changed file with 59 additions and 59 deletions.
diff --git a/src/index.vue b/src/index.vue
@@ -27,8 +27,6 @@
       >
         <div class="vue-input">
           <input :placeholder="innerPlaceholder" readonly @click="focus" />
-          <span :class="['inline-flex', `vs${instance.uid}-toggle`]" />
-          <span :class="['inline-flex', `vs${instance.uid}-loading`]" />
         </div>
       </template>
 
@@ -46,20 +44,69 @@
             </slot>
           </template>
         </v-tags>
-        <span :class="['inline-flex', `vs${instance.uid}-toggle`]" />
+        <slot name="toggle" :isFocusing="isFocusing" :toggle="toggle">
+          <span class="icon arrow-downward" :class="{ active: isFocusing }" @click="toggle" @mousedown.prevent.stop />
+        </slot>
       </template>
 
       <template v-else>
-        <template v-if="searchable">
-          <span :class="[`vs${instance.uid}-search`]" />
+        <v-input
+          v-if="searchable"
+          ref="input"
+          v-model="searchingInputValue"
+          :disabled="disabled"
+          :placeholder="isFocusing ? searchPlaceholder : innerPlaceholder"
+          @input="handleInputForInput"
+          @change="handleChangeForInput"
+          @focus="handleFocusForInput"
+          @blur="handleBlurForInput"
+          @escape="blur"
+          :autofocus="autofocus || (taggable && searchable)"
+          :tabindex="tabindex"
+          :comboboxUid="instance.uid"
+        />
+        <template v-if="loading">
+          <slot name="loading">
+            <span class="icon loading">
+              <div />
+              <div />
+              <div />
+            </span>
+          </slot>
+        </template>
+        <template v-else>
+          <slot name="toggle" :isFocusing="isFocusing" :toggle="toggle">
+            <span class="icon arrow-downward" :class="{ active: isFocusing }" @click="toggle" @mousedown.prevent.stop />
+          </slot>
         </template>
       </template>
     </div>
 
     <template v-if="multiple && taggable && searchable">
-      <div v-show="isFocusing">
-        <span :class="[`vs${instance.uid}-search`]" />
-      </div>
+      <v-input
+        v-show="isFocusing"
+        ref="input"
+        v-model="searchingInputValue"
+        :disabled="disabled"
+        :placeholder="isFocusing ? searchPlaceholder : innerPlaceholder"
+        @input="handleInputForInput"
+        @change="handleChangeForInput"
+        @focus="handleFocusForInput"
+        @blur="handleBlurForInput"
+        @escape="blur"
+        :autofocus="autofocus || (taggable && searchable)"
+        :tabindex="tabindex"
+        :comboboxUid="instance.uid"
+      />
+      <template v-if="loading">
+        <slot name="loading">
+          <span class="icon loading">
+            <div />
+            <div />
+            <div />
+          </span>
+        </slot>
+      </template>
     </template>
 
     <v-dropdown
@@ -78,51 +125,6 @@
       </template>
     </v-dropdown>
   </div>
-
-  <span v-show="false" :class="`vs${instance.uid}-search`" />
-  <teleport :to="`.vs${instance.uid}-search`">
-    <v-input
-      ref="input"
-      v-model="searchingInputValue"
-      :disabled="disabled"
-      :placeholder="isFocusing ? searchPlaceholder : innerPlaceholder"
-      @input="handleInputForInput"
-      @change="handleChangeForInput"
-      @focus="handleFocusForInput"
-      @blur="handleBlurForInput"
-      @escape="blur"
-      :autofocus="autofocus || (taggable && searchable)"
-      :tabindex="tabindex"
-      :comboboxUid="instance.uid"
-    >
-      <template #append>
-        <span :class="['inline-flex', `vs${instance.uid}-loading`]" />
-        <span :class="['inline-flex', `vs${instance.uid}-toggle`]" />
-      </template>
-    </v-input>
-  </teleport>
-
-  <span v-show="false" :class="`vs${instance.uid}-toggle`" />
-  <teleport :to="`.vs${instance.uid}-toggle`">
-    <template v-if="taggable || loading === false">
-      <slot name="toggle" :isFocusing="isFocusing" :toggle="toggle">
-        <span class="icon arrow-downward" :class="{ active: isFocusing }" @click="toggle" @mousedown.prevent.stop />
-      </slot>
-    </template>
-  </teleport>
-
-  <span v-show="false" :class="`vs${instance.uid}-loading`" />
-  <teleport :to="`.vs${instance.uid}-loading`">
-    <template v-if="loading">
-      <slot name="loading">
-        <span class="icon loading">
-          <div />
-          <div />
-          <div />
-        </span>
-      </slot>
-    </template>
-  </teleport>
 </template>
 
 <script>
@@ -271,12 +273,10 @@ const VueSelect = {
         if (isFocusing.value) {
           context.emit('opened')
           if (props.searchable) {
-            nextTick(() => {
-              if (inputEl.value !== document.activeElement) {
-                inputEl.value.focus()
-              }
-              context.emit('search:focus')
-            })
+            if (inputEl.value !== document.activeElement) {
+              inputEl.value.focus()
+            }
+            context.emit('search:focus')
           } else {
             wrapper.value.focus()
           }