github
/
element
mirror of https://github.com/ElemeFE/element
1
0
Fork 0
Code Issues Releases Wiki Activity

Select: show dropdown on input focus

pull/7995/head
Leopoldthecoder 2017-11-02 19:18:48 +08:00 committed by 杨奕
parent 52bbf4f3e1
commit eefa2c907a
2 changed files with 10 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
packages/select/src/select.vue
View File

@ -28,6 +28,7 @@
class="el-select__input" class="el-select__input"
:class="[selectSize ? `is-${ selectSize }` : '']" :class="[selectSize ? `is-${ selectSize }` : '']"
:disabled="disabled" :disabled="disabled"
@focus="handleFocus"
@keyup="managePlaceholder" @keyup="managePlaceholder"
@keydown="resetInputState" @keydown="resetInputState"
@keydown.down.prevent="navigateOptions('next')" @keydown.down.prevent="navigateOptions('next')"
@ -82,7 +83,7 @@
tag="ul" tag="ul"
wrap-class="el-select-dropdown__wrap" wrap-class="el-select-dropdown__wrap"
view-class="el-select-dropdown__list" view-class="el-select-dropdown__list"
:class="{ 'is-empty': !allowCreate && filteredOptionsCount === 0 }" :class="{ 'is-empty': !allowCreate && query && filteredOptionsCount === 0 }"
v-show="options.length > 0 && !loading"> v-show="options.length > 0 && !loading">
<el-option <el-option
:value="query" :value="query"
@ -164,7 +165,7 @@
return this.loadingText || this.t('el.select.loading'); return this.loadingText || this.t('el.select.loading');
} else { } else {
if (this.remote && this.query === '' && this.options.length === 0) return false; if (this.remote && this.query === '' && this.options.length === 0) return false;
if (this.filterable && this.options.length > 0 && this.filteredOptionsCount === 0) { if (this.filterable && this.query && this.options.length > 0 && this.filteredOptionsCount === 0) {
return this.noMatchText || this.t('el.select.noMatch'); return this.noMatchText || this.t('el.select.noMatch');
} }
if (this.options.length === 0) { if (this.options.length === 0) {
@ -538,7 +539,7 @@
let inputChildNodes = this.$refs.reference.$el.childNodes; let inputChildNodes = this.$refs.reference.$el.childNodes;
let input = [].filter.call(inputChildNodes, item => item.tagName === 'INPUT')[0]; let input = [].filter.call(inputChildNodes, item => item.tagName === 'INPUT')[0];
const tags = this.$refs.tags; const tags = this.$refs.tags;
input.style.height = this.selected.length === 0 && this.selectSize === 'mini' input.style.height = this.selected.length === 0
? sizeMap[this.selectSize] + 'px' ? sizeMap[this.selectSize] + 'px'
: Math.max(tags ? (tags.clientHeight + 10) : 0, sizeMap[this.selectSize] || 40) + 'px'; : Math.max(tags ? (tags.clientHeight + 10) : 0, sizeMap[this.selectSize] || 40) + 'px';
if (this.visible && this.emptyText !== false) { if (this.visible && this.emptyText !== false) {

7
packages/theme-chalk/src/select.scss
View File

@ -62,6 +62,10 @@
} }
} }
} }
&.is-focus .el-input__inner {
border-color: $--select-input-focus-background;
}
} }
> .el-input { > .el-input {
@ -75,7 +79,7 @@
margin-left: 15px; margin-left: 15px;
color: $--select-multiple-input-color; color: $--select-multiple-input-color;
font-size: $--select-font-size; font-size: $--select-font-size;
vertical-align: baseline; vertical-align: middle;
appearance: none; appearance: none;
height: 28px; height: 28px;
background-color: transparent; background-color: transparent;
@ -121,6 +125,7 @@
&__close.el-icon-close { &__close.el-icon-close {
background-color: $--color-text-placeholder; background-color: $--color-text-placeholder;
right: -7px; right: -7px;
top: 0;
color: $--color-white; color: $--color-white;
&:hover { &:hover {