ExternalVendorCode/openmct
1
0
Fork 0
mirror of https://github.com/nasa/openmct.git synced 2025-04-10 12:50:15 +00:00
Code Issues Actions 1 Packages Projects Releases Wiki Activity

Show all options when clicking arrow in autocomplete form - Mct4578 (#4708)

Browse Source 
Co-authored-by: Andrew Henry <akhenry@gmail.com>
Co-authored-by: Nikhil <nikhil.k.mandlik@nasa.gov>
Co-authored-by: Jamie V <jamie.j.vigliotta@nasa.gov>
This commit is contained in:
Scott Bell 2022-01-28 22:24:04 +01:00 committed by GitHub
parent cd38545267
commit 54ef9a830e
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 25 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

37
src/api/forms/components/controls/AutoCompleteField.vue
View File

@ -65,6 +65,7 @@ export default {
data() {
return {
hideOptions: true,
showFilteredOptions: false,
optionIndex: 0,
field: this.model.value
};
@ -72,16 +73,24 @@ export default {
computed: {
filteredOptions() {
const options = this.optionNames || [];
if (this.showFilteredOptions) {
return options
.filter(option => {
return option.toLowerCase().indexOf(this.field.toLowerCase()) >= 0;
}).map((option, index) => {
return {
optionId: index,
name: option
};
});
}
return options
.filter(option => {
return option.toLowerCase().indexOf(this.field.toLowerCase()) >= 0;
}).map((option, index) => {
return {
optionId: index,
name: option
};
});
return options.map((option, index) => {
return {
optionId: index,
name: option
};
});
}
},
watch: {
@ -131,11 +140,12 @@ export default {
this.hideOptions = true;
this.field = string;
},
showOptions(string) {
showOptions() {
this.hideOptions = false;
this.optionIndex = 0;
},
keyDown($event) {
this.showFilteredOptions = true;
if (this.filteredOptions) {
let keyCode = $event.keyCode;
switch (keyCode) {
@ -155,11 +165,14 @@ export default {
},
inputClicked() {
this.autocompleteInputElement.select();
this.showOptions(this.autocompleteInputElement.value);
this.showOptions();
},
arrowClicked() {
// if the user clicked the arrow, we want
// to show them all the options
this.showFilteredOptions = false;
this.autocompleteInputElement.select();
this.showOptions('');
this.showOptions();
},
optionMouseover(optionId) {
this.optionIndex = optionId;