Fix enter key issue on Google (#1758)

Fix the enter key triggering form submit on Google even though preventDefault is used.

2 files changed, 17 insertions, 13 deletions

diff --git a/keepassxc-browser/content/autocomplete.js b/keepassxc-browser/content/autocomplete.js
index 63cdc0a..75e4a6c 100644
--- a/keepassxc-browser/content/autocomplete.js
+++ b/keepassxc-browser/content/autocomplete.js
@@ -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();
diff --git a/keepassxc-browser/css/autocomplete.css b/keepassxc-browser/css/autocomplete.css
index 41c4d1c..0acdaa2 100644
--- a/keepassxc-browser/css/autocomplete.css
+++ b/keepassxc-browser/css/autocomplete.css
@@ -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;