Fix enter key issue on Google (#1758)

Fix the enter key triggering form submit on Google even though preventDefault is used.
This commit is contained in:
Stefan Sundin 2022-11-03 22:31:49 -07:00 committed by GitHub
parent c4a1713de9
commit 9df8a515f2
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
2 changed files with 17 additions and 13 deletions

View file

@ -2,6 +2,12 @@
const MAX_AUTOCOMPLETE_NAME_LEN = 50;
function cancelEvent(e) {
e.preventDefault();
e.stopPropagation();
e.stopImmediatePropagation();
}
class Autocomplete {
constructor() {
this.afterFillSort = SORT_BY_MATCHING_CREDENTIALS_SETTING;
@ -177,7 +183,7 @@ class Autocomplete {
const inputField = e.target;
if (e.key === 'ArrowDown') {
e.preventDefault();
cancelEvent(e);
// If the list is not visible, show it
if (!this.input) {
await this.showList(inputField);
@ -193,18 +199,14 @@ class Autocomplete {
this.selectItem();
}
} else if (e.key === 'ArrowUp' && this.list) {
e.preventDefault();
cancelEvent(e);
const items = this.getAllItems();
this.index = (this.index > 0 ? this.index : items.length) - 1;
this.selectItem();
} else if (e.key === 'Enter' && this.input) {
if (inputField.value === '') {
e.preventDefault();
}
const items = this.getAllItems();
if (this.index >= 0 && items[this.index] !== undefined) {
e.preventDefault();
cancelEvent(e);
await this.itemEnter(this.index, this.elements);
this.closeList();

View file

@ -2,6 +2,11 @@
display: none;
z-index: 2147483646;
position: absolute !important;
background-color: #ddd;
border: 1px solid rgba(0,0,0,.125);
border-bottom-right-radius: 4px;
border-bottom-left-radius: 4px;
overflow: hidden; /* this fixes an issue with the border radius not showing up clearly */
}
.kpxcAutocomplete-items {
@ -13,8 +18,7 @@
padding: 5px;
cursor: pointer;
background-color: var(--kpxc-background-color);
border: 1px solid rgba(0,0,0,.125) !important;
border-top-width: 0px !important;
border-bottom: 1px solid rgba(0,0,0,.125);
width: auto;
color: var(--kpxc-text-color);
font-size: max(10px, .9em) !important;
@ -25,8 +29,7 @@
}
.kpxcAutocomplete-items div:last-child {
border-bottom-right-radius: 4px !important;
border-bottom-left-radius: 4px !important;
border-bottom: none;
}
.kpxcAutocomplete-active {
@ -36,8 +39,7 @@
#kpxcAutocomplete-container footer {
padding: 5px;
background-color: #ddd;
border: 1px solid rgba(0,0,0,.125) !important;
border-top: 1px solid rgba(0,0,0,.125) !important;
width: auto;
color: #000;
font-size: max(9px, .8em) !important;