AutoComplete | update keyboard accessibility

pull/2835/head
Tuğçe Küçükoğlu 2022-08-09 17:37:01 +03:00
parent 736304879a
commit 93af8f6dcd
1 changed files with 15 additions and 4 deletions

View File

@ -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) {