From b4c84c509d4599e70baa63c494f81983c9caba2a Mon Sep 17 00:00:00 2001
From: hetech <dengzhiyang123@126.com>
Date: Thu, 28 Jun 2018 19:05:26 +0800
Subject: [PATCH] Cascader: hide label when user inputs (#11738)

* Cascader: hide label when user input

* Cascader: update main.vue

* Update main.vue

* Cascader: not set readonly in IE
---
 packages/cascader/src/main.vue | 16 +++++++++++++---
 1 file changed, 13 insertions(+), 3 deletions(-)

diff --git a/packages/cascader/src/main.vue b/packages/cascader/src/main.vue
index 3f4f91960..c3392f536 100644
--- a/packages/cascader/src/main.vue
+++ b/packages/cascader/src/main.vue
@@ -19,12 +19,14 @@
   >
     <el-input
       ref="input"
-      :readonly="!filterable"
+      :readonly="readonly"
       :placeholder="currentLabels.length ? undefined : placeholder"
       v-model="inputValue"
       @input="debouncedInputChange"
       @focus="handleFocus"
       @blur="handleBlur"
+      @compositionstart.native="handleComposition"
+      @compositionend.native="handleComposition"
       :validate-event="false"
       :size="size"
       :disabled="cascaderDisabled"
@@ -44,7 +46,7 @@
         ></i>
       </template>
     </el-input>
-    <span class="el-cascader__label" v-show="inputValue === ''">
+    <span class="el-cascader__label" v-show="inputValue === '' && !isOnComposition">
       <template v-if="showAllLevels">
         <template v-for="(label, index) in currentLabels">
           {{ label }}
@@ -180,7 +182,8 @@ export default {
       inputValue: '',
       flatOptions: null,
       id: generateId(),
-      needFocus: true
+      needFocus: true,
+      isOnComposition: false
     };
   },
 
@@ -217,6 +220,10 @@ export default {
     },
     cascaderDisabled() {
       return this.disabled || (this.elForm || {}).disabled;
+    },
+    readonly() {
+      const isIE = !this.$isServer && !isNaN(Number(document.documentMode));
+      return !this.filterable || (!isIE && !this.menuVisible);
     }
   },
 
@@ -409,6 +416,9 @@ export default {
     },
     handleBlur(event) {
       this.$emit('blur', event);
+    },
+    handleComposition(event) {
+      this.isOnComposition = event.type !== 'compositionend';
     }
   },