({}) }
},
directives: {
- 'click-outside': vOnClickOutside,
+ 'click-outside': vOnClickOutside
},
data() {
return {
@@ -127,6 +136,7 @@ export default {
selectAllState: 'unchecked',
query: '',
fixedWidth: true,
+ focusedOption: null
};
},
mixins: [FixedFlyoutMixin],
@@ -331,6 +341,25 @@ export default {
}
return true;
},
- },
+ keySelectOptions(e) {
+ if (e.key !== 'Tab') {
+ e.stopPropagation();
+ e.preventDefault();
+ } else {
+ this.close();
+ }
+
+ if (e.key === 'ArrowDown') {
+ this.focusedOption = this.focusedOption === null ? 0 : this.focusedOption + 1;
+ if (this.focusedOption > this.$refs.options.length - 1) this.focusedOption = 0;
+ } else if (e.key === 'ArrowUp') {
+ this.focusedOption = (this.focusedOption || this.$refs.options.length) - 1;
+ if (this.focusedOption < 0) this.focusedOption = this.$refs.options.length - 1;
+ } else if (e.key === 'Enter' && this.focusedOption !== null) {
+ this.setValue(this.filteredOptions[this.focusedOption][0]);
+ }
+ this.$refs.options[this.focusedOption]?.scrollIntoView({ block: 'nearest' });
+ }
+ }
};