Select: input should be readonly when options menu not visible (#10944)

README.md

@@ -49,7 +49,7 @@
       </td>
       <td align="center" valign="middle">
         <a href="https://www.duotai.cn/?utm_source=element" target="_blank">
-          <img width="150px" src="https://user-images.githubusercontent.com/10095631/39403151-c42dbcee-4ba5-11e8-9c09-8e5283da4144.png">
+          <img width="140px" src="https://user-images.githubusercontent.com/10095631/39403151-c42dbcee-4ba5-11e8-9c09-8e5283da4144.png">
         </a>
       </td>
       <td align="center" valign="middle">

packages/color-picker/src/main.vue

@@ -96,14 +96,14 @@
         }
       },
       displayedColor(val) {
-        const outerColor = new Color({
+        const currentValueColor = new Color({
           enableAlpha: this.showAlpha,
           format: this.colorFormat
         });
-        outerColor.fromString(this.value);
+        currentValueColor.fromString(this.value);
 
-        const outerColorRgb = this.displayedRgb(outerColor, this.showAlpha);
-        if (val !== outerColorRgb) {
+        const currentValueColorRgb = this.displayedRgb(currentValueColor, this.showAlpha);
+        if (val !== currentValueColorRgb) {
           this.$emit('active-change', val);
         }
       }

packages/select/src/select.vue

@@ -78,7 +78,7 @@
       :auto-complete="autoComplete"
       :size="selectSize"
       :disabled="selectDisabled"
-      :readonly="!filterable || multiple"
+      :readonly="readonly"
       :validate-event="false"
       :class="{ 'is-focus': visible }"
       @focus="handleFocus"
@@ -183,6 +183,13 @@
       _elFormItemSize() {
         return (this.elFormItem || {}).elFormItemSize;
       },
+
+      readonly() {
+        // trade-off for IE input readonly problem: https://github.com/ElemeFE/element/issues/10403
+        const isIE = !this.$isServer && !isNaN(Number(document.documentMode));
+        return !this.filterable || this.multiple || !isIE && !this.visible;
+      },
+
       iconClass() {
         let criteria = this.clearable &&
           !this.selectDisabled &&