Maintain focus of the password input when adding the password visibility button

Fixes #4050

diff --git a/ts/WoltLabSuite/Core/Ui/Password.ts b/ts/WoltLabSuite/Core/Ui/Password.ts
index b9ef3e4882a35147cbc5fa3d44fc02b96d4b5b09..7576117fe5a30efea4d39e7e2697bdeb1ea48166 100644 (file)
--- a/ts/WoltLabSuite/Core/Ui/Password.ts
+++ b/ts/WoltLabSuite/Core/Ui/Password.ts
@@ -28,6 +28,8 @@ function initElements(): void {
 function initElement(input: HTMLInputElement): void {
   _knownElements.add(input);
 
+  const activeElement = document.activeElement;
+
   const inputAddon = document.createElement("div");
   inputAddon.classList.add("inputAddon");
   input.insertAdjacentElement("beforebegin", inputAddon);
@@ -54,6 +56,10 @@ function initElement(input: HTMLInputElement): void {
       toggle(input, button, icon);
     }
   });
+
+  if (activeElement === input) {
+    input.focus();
+  }
 }
 
 function toggle(input: HTMLInputElement, button: HTMLElement, icon: HTMLElement): void {

diff --git a/wcfsetup/install/files/js/WoltLabSuite/Core/Ui/Password.js b/wcfsetup/install/files/js/WoltLabSuite/Core/Ui/Password.js
index f1f503a9da1479487ea0b8a327f4f28428588373..08685dfb500a2c46c4c3613f60975b2cdb709ede 100644 (file)
--- a/wcfsetup/install/files/js/WoltLabSuite/Core/Ui/Password.js
+++ b/wcfsetup/install/files/js/WoltLabSuite/Core/Ui/Password.js
@@ -27,6 +27,7 @@ define(["require", "exports", "tslib", "../Dom/Change/Listener", "../Language"],
     }
     function initElement(input) {
         _knownElements.add(input);
+        const activeElement = document.activeElement;
         const inputAddon = document.createElement("div");
         inputAddon.classList.add("inputAddon");
         input.insertAdjacentElement("beforebegin", inputAddon);
@@ -50,6 +51,9 @@ define(["require", "exports", "tslib", "../Dom/Change/Listener", "../Language"],
                 toggle(input, button, icon);
             }
         });
+        if (activeElement === input) {
+            input.focus();
+        }
     }
     function toggle(input, button, icon) {
         if (input.type === "password") {