From 1e317a3c3b2a8e79e3a34ed95863e1079c564d05 Mon Sep 17 00:00:00 2001
From: Leopoldthecoder <Leopoldthecuber@gmail.com>
Date: Fri, 19 Aug 2016 18:20:54 +0800
Subject: [PATCH] add transition-group in select

---
 examples/icon.json                            |  2 +-
 packages/rate/src/main.vue                    |  2 +-
 .../select-dropdown/src/select-dropdown.vue   |  4 ++-
 packages/select/src/select.vue                | 32 ++++++++++++-------
 4 files changed, 26 insertions(+), 14 deletions(-)

diff --git a/examples/icon.json b/examples/icon.json
index e9aaaa391..e3be3e096 100644
--- a/examples/icon.json
+++ b/examples/icon.json
@@ -1 +1 @@
-["search","share","setting","circle-cross","warning","information","circle-check","delete","d-arrow-left","d-arrow-right","picture","upload","menu","time","circle-close","arrow-down","arrow-up","arrow-right","arrow-left","close","document","d-caret","date","message","loading","ellipsis","plus","caret-left","caret-right","caret-bottom","edit","caret-top","check","minus","star-on","star-off"]
\ No newline at end of file
+["search","share","setting","circle-cross","warning","information","circle-check","delete","d-arrow-left","d-arrow-right","picture","upload","menu","time","circle-close","arrow-down","arrow-up","arrow-right","arrow-left","close","document","d-caret","date","message","loading","ellipsis","plus","caret-left","caret-right","caret-bottom","edit","caret-top","check","minus","star-off","star-on"]
\ No newline at end of file
diff --git a/packages/rate/src/main.vue b/packages/rate/src/main.vue
index fd54bc009..124748116 100644
--- a/packages/rate/src/main.vue
+++ b/packages/rate/src/main.vue
@@ -195,7 +195,7 @@
 
       showDecimalIcon(item) {
         let showWhenDisabled = this.disabled && this.valueDecimal > 0 && item - 1 < this.value && item > this.value;
-        let showWhenAllowHalf = this.allowHalf && this.pointerAtLeftHalf && ((item - 0.5).toString() === this.currentValue.toString());
+        let showWhenAllowHalf = this.allowHalf && this.pointerAtLeftHalf && ((item - 0.5).toFixed(1) === this.currentValue.toFixed(1));
         return showWhenDisabled || showWhenAllowHalf;
       },
 
diff --git a/packages/select-dropdown/src/select-dropdown.vue b/packages/select-dropdown/src/select-dropdown.vue
index 75bb9deb0..cee796d75 100644
--- a/packages/select-dropdown/src/select-dropdown.vue
+++ b/packages/select-dropdown/src/select-dropdown.vue
@@ -26,7 +26,9 @@
     methods: {
       updatePopper() {
         if (this.popper) {
-          this.popper.update();
+          this.$nextTick(() => {
+            this.popper.update();
+          });
         } else {
           this.$nextTick(() => {
             this.popper = new Popper(this.$parent.$refs.reference.$el, this.$el, {
diff --git a/packages/select/src/select.vue b/packages/select/src/select.vue
index f903a8434..825525a9f 100644
--- a/packages/select/src/select.vue
+++ b/packages/select/src/select.vue
@@ -1,14 +1,16 @@
 <template>
   <div class="el-select" :class="{ 'is-multiple': multiple, 'is-small': size === 'small' }">
     <div class="el-select__tags" v-if="multiple" @click.stop="toggleMenu" ref="tags" :style="{ 'max-width': inputWidth - 36 + 'px' }">
-      <el-tag
-      v-for="item in selected"
-      closable
-      :hit="item.hitState"
-      type="primary"
-      @click.native="deleteTag($event, item)"
-      close-transition>{{ item.label }}</el-tag>
-
+      <transition-group @after-leave="resetInputHeight">
+        <el-tag
+          v-for="item in selected"
+          :key="item"
+          closable
+          :hit="item.hitState"
+          type="primary"
+          @click.native="deleteTag($event, item)"
+          close-transition>{{ item.label }}</el-tag>
+      </transition-group>
       <input
         type="text"
         class="el-select__input"
@@ -42,7 +44,7 @@
       @keydown.native.tab="visible = false"
       @mouseenter.native="inputHovering = true"
       @mouseleave.native="inputHovering = false"
-      :icon="showCloseIcon ? 'circle-close' : 'caret-top'"
+      :icon="iconClass"
       :style="{ 'width': inputWidth + 'px' }"
       v-element-clickoutside="handleClose">
     </el-input>
@@ -76,6 +78,10 @@
     componentName: 'select',
 
     computed: {
+      iconClass() {
+        return this.showCloseIcon ? 'circle-close' : (this.remote && this.filterable ? '' : 'caret-top');
+      },
+
       debounce() {
         return this.remote ? 300 : 0;
       },
@@ -280,7 +286,9 @@
       visible(val) {
         if (!val) {
           this.$refs.reference.$el.querySelector('input').blur();
-          this.$el.querySelector('.el-input__icon').classList.remove('is-reverse');
+          if (this.$el.querySelector('.el-input__icon')) {
+            this.$el.querySelector('.el-input__icon').classList.remove('is-reverse');
+          }
           this.broadcast('select-dropdown', 'destroyPopper');
           if (this.$refs.input) {
             this.$refs.input.blur();
@@ -301,7 +309,9 @@
           if (this.remote) {
             this.voidRemoteQuery = true;
           }
-          this.$el.querySelector('.el-input__icon').classList.add('is-reverse');
+          if (this.$el.querySelector('.el-input__icon')) {
+            this.$el.querySelector('.el-input__icon').classList.add('is-reverse');
+          }
           this.broadcast('select-dropdown', 'updatePopper');
           if (this.filterable) {
             this.query = this.selectedLabel;