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

@@ -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';
     }
   },