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

pull/10945/head
杨奕 2018-04-29 18:00:56 +08:00 committed by GitHub
parent a8248ddfef
commit 16dc174a8d
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 13 additions and 6 deletions

View File

@ -49,7 +49,7 @@
</td> </td>
<td align="center" valign="middle"> <td align="center" valign="middle">
<a href="https://www.duotai.cn/?utm_source=element" target="_blank"> <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> </a>
</td> </td>
<td align="center" valign="middle"> <td align="center" valign="middle">

View File

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

View File

@ -78,7 +78,7 @@
:auto-complete="autoComplete" :auto-complete="autoComplete"
:size="selectSize" :size="selectSize"
:disabled="selectDisabled" :disabled="selectDisabled"
:readonly="!filterable || multiple" :readonly="readonly"
:validate-event="false" :validate-event="false"
:class="{ 'is-focus': visible }" :class="{ 'is-focus': visible }"
@focus="handleFocus" @focus="handleFocus"
@ -183,6 +183,13 @@
_elFormItemSize() { _elFormItemSize() {
return (this.elFormItem || {}).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() { iconClass() {
let criteria = this.clearable && let criteria = this.clearable &&
!this.selectDisabled && !this.selectDisabled &&