Normalise behaviour when opening select with selected option present in options

This commit is contained in:
Sergio Crisostomo 2018-05-08 14:23:49 +02:00
parent 7dbde804d8
commit 31788df30b

View file

@ -122,6 +122,8 @@
}; };
}; };
const ANIMATION_TIMEOUT = 300;
export default { export default {
name: 'iSelect', name: 'iSelect',
mixins: [ Emitter, Locale ], mixins: [ Emitter, Locale ],
@ -230,6 +232,7 @@
slotOptions: this.$slots.default, slotOptions: this.$slots.default,
caretPosition: -1, caretPosition: -1,
lastRemoteQuery: '', lastRemoteQuery: '',
unchangedQuery: true,
hasExpectedValue: false, hasExpectedValue: false,
preventRemoteCall: false, preventRemoteCall: false,
}; };
@ -261,6 +264,10 @@
[`${prefixCls}-selection-focused`]: this.isFocused [`${prefixCls}-selection-focused`]: this.isFocused
}; };
}, },
queryStringMatchesSelectedOption(){
const selectedOptions = this.values[0];
return selectedOptions && !this.multiple && this.unchangedQuery && this.query === selectedOptions.value;
},
localeNotFoundText () { localeNotFoundText () {
if (typeof this.notFoundText === 'undefined') { if (typeof this.notFoundText === 'undefined') {
return this.t('i.select.noMatch'); return this.t('i.select.noMatch');
@ -425,6 +432,7 @@
}, },
validateOption({elm, propsData}){ validateOption({elm, propsData}){
if (this.queryStringMatchesSelectedOption) return true;
const value = propsData.value; const value = propsData.value;
const label = propsData.label || ''; const label = propsData.label || '';
const textContent = elm && elm.textContent || ''; const textContent = elm && elm.textContent || '';
@ -446,6 +454,7 @@
}, },
hideMenu () { hideMenu () {
this.toggleMenu(null, false); this.toggleMenu(null, false);
setTimeout(() => this.unchangedQuery = true, ANIMATION_TIMEOUT);
}, },
onClickOutside(event){ onClickOutside(event){
if (this.visible) { if (this.visible) {
@ -469,6 +478,7 @@
} }
}, },
reset(){ reset(){
this.unchangedQuery = true;
this.values = []; this.values = [];
}, },
handleKeydown (e) { handleKeydown (e) {
@ -553,6 +563,7 @@
this.isFocused = true; // so we put back focus after clicking with mouse on option elements this.isFocused = true; // so we put back focus after clicking with mouse on option elements
} else { } else {
this.query = option.value;
this.values = [option]; this.values = [option];
this.lastRemoteQuery = ''; this.lastRemoteQuery = '';
this.hideMenu(); this.hideMenu();
@ -565,6 +576,7 @@
this.broadcast('Drop', 'on-update-popper'); this.broadcast('Drop', 'on-update-popper');
}, },
onQueryChange(query) { onQueryChange(query) {
this.unchangedQuery = false;
this.query = query; this.query = query;
if (this.query.length > 0) this.visible = true; if (this.query.length > 0) this.visible = true;
}, },