AutoComplete | update keyboard accessibility
parent
736304879a
commit
93af8f6dcd
|
@ -198,6 +198,7 @@ export default {
|
||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
id: UniqueComponentId(),
|
id: UniqueComponentId(),
|
||||||
|
inputText: null,
|
||||||
focused: false,
|
focused: false,
|
||||||
focusedOptionIndex: -1,
|
focusedOptionIndex: -1,
|
||||||
focusedMultipleOptionIndex: -1,
|
focusedMultipleOptionIndex: -1,
|
||||||
|
@ -357,6 +358,8 @@ export default {
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
onInput(event) {
|
onInput(event) {
|
||||||
|
this.inputText = event.target.value;
|
||||||
|
|
||||||
if (this.searchTimeout) {
|
if (this.searchTimeout) {
|
||||||
clearTimeout(this.searchTimeout);
|
clearTimeout(this.searchTimeout);
|
||||||
}
|
}
|
||||||
|
@ -537,6 +540,7 @@ export default {
|
||||||
},
|
},
|
||||||
onArrowRightKey() {
|
onArrowRightKey() {
|
||||||
this.focusedOptionIndex = -1;
|
this.focusedOptionIndex = -1;
|
||||||
|
this.$refs.multiContainer.focus();
|
||||||
},
|
},
|
||||||
onHomeKey(event) {
|
onHomeKey(event) {
|
||||||
event.currentTarget.setSelectionRange(0, 0);
|
event.currentTarget.setSelectionRange(0, 0);
|
||||||
|
@ -597,15 +601,22 @@ export default {
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
onArrowLeftKeyOnMultiple() {
|
onArrowLeftKeyOnMultiple() {
|
||||||
|
if (!ObjectUtils.isNotEmpty(this.inputText) && this.modelValue && this.modelValue.length > 0) {
|
||||||
this.focusedMultipleOptionIndex = this.focusedMultipleOptionIndex < 1 ? 0 : this.focusedMultipleOptionIndex - 1;
|
this.focusedMultipleOptionIndex = this.focusedMultipleOptionIndex < 1 ? 0 : this.focusedMultipleOptionIndex - 1;
|
||||||
|
}
|
||||||
},
|
},
|
||||||
onArrowRightKeyOnMultiple() {
|
onArrowRightKeyOnMultiple() {
|
||||||
|
if (!ObjectUtils.isNotEmpty(this.inputText) && this.modelValue && this.modelValue.length > 0) {
|
||||||
this.focusedMultipleOptionIndex++;
|
this.focusedMultipleOptionIndex++;
|
||||||
|
|
||||||
if (this.focusedMultipleOptionIndex > (this.modelValue.length - 1)) {
|
if (this.focusedMultipleOptionIndex > (this.modelValue.length - 1)) {
|
||||||
this.focusedMultipleOptionIndex = -1;
|
this.focusedMultipleOptionIndex = -1;
|
||||||
this.$refs.focusInput.focus();
|
this.$refs.focusInput.focus();
|
||||||
}
|
}
|
||||||
|
}
|
||||||
|
else {
|
||||||
|
this.$refs.focusInput.focus();
|
||||||
|
}
|
||||||
},
|
},
|
||||||
onBackspaceKeyOnMultiple(event) {
|
onBackspaceKeyOnMultiple(event) {
|
||||||
if (this.focusedMultipleOptionIndex !== -1) {
|
if (this.focusedMultipleOptionIndex !== -1) {
|
||||||
|
|
Loading…
Reference in New Issue