Fix backup key and filter field being autofilled as logins

Firefox misinterprets the backup key field on the settings page and the room filter field as a pair of username-password login fields. It then autofills a username in the filter field each time the settings page is opened. The only working fix is to mark both fields as "autocomplete: new-password" because Firefox ignores all other directives. I still added the proper attributes to both fields just in case the major browsers will decide to follow the spec one day. The "readonly" hack is included for completeness. It may improve compatibility with older browsers where one of the other tricks fails. Signed-off-by: Mirian Margiani <[email protected]>
element-hq · Dec 2, 2024 · 8d7a4d1 · 8d7a4d1
1 parent cd02ef6
commit 8d7a4d1
Show file tree

Hide file tree

Showing 2 changed files with 20 additions and 3 deletions.
diff --git a/src/platform/web/ui/session/leftpanel/LeftPanelView.js b/src/platform/web/ui/session/leftpanel/LeftPanelView.js
@@ -1,5 +1,6 @@
 /*
 Copyright 2020 Bruno Windels <[email protected]>
+Copyright 2024 Mirian Margiani <[email protected]>
 
 Licensed under the Apache License, Version 2.0 (the "License");
 you may not use this file except in compliance with the License.
@@ -32,7 +33,10 @@ class FilterField extends TemplateView {
             type: "text",
             placeholder: options?.label,
             "aria-label": options?.label,
-            autocomplete: options?.autocomplete,
+            autocomplete: "new-password",
+            spellcheck: "false",
+            autocorrect: "off",
+            readonly: true,
             enterkeyhint: 'search',
             name: options?.name,
             onInput: event => options.set(event.target.value),
@@ -41,7 +45,10 @@ class FilterField extends TemplateView {
                     clear();
                 }
             },
-            onFocus: () => filterInput.select()
+            onFocus: () => {
+                filterInput.removeAttribute("readonly");
+                filterInput.select();
+            },
         });
         const clearButton = t.button({
             onClick: clear,

diff --git a/src/platform/web/ui/session/settings/KeyBackupSettingsView.ts b/src/platform/web/ui/session/settings/KeyBackupSettingsView.ts
@@ -1,5 +1,6 @@
 /*
 Copyright 2020 The Matrix.org Foundation C.I.C.
+Copyright 2024 Mirian Margiani <[email protected]>
 
 Licensed under the Apache License, Version 2.0 (the "License");
 you may not use this file except in compliance with the License.
@@ -118,7 +119,16 @@ function renderEnableFromPhrase(t: Builder<KeyBackupViewModel>, vm: KeyBackupVie
 function renderEnableFieldRow(t, vm, label, callback): ViewNode {
     let setupDehydrationCheck;
     const eventHandler = () => callback(input.value, setupDehydrationCheck?.checked || false);
-    const input = t.input({type: "password", disabled: vm => vm.isBusy, placeholder: label});
+    const input = t.input({
+        type: "password",
+        disabled: vm => vm.isBusy,
+        placeholder: label,
+        autocomplete: "new-password",
+        spellcheck: "false",
+        autocorrect: "off",
+        readonly: true,
+        onFocus: () => input.removeAttribute("readonly"),
+    });
     const children = [
         t.p([
             input,