Improve icon inject (#541)

browser-extensions/chrome/src/contentScript/Form.ts

@@ -193,7 +193,11 @@ export function injectIcon(input: HTMLInputElement): void {
 
   icon.setAttribute('data-icon-for', input.id);
 
-  icon.addEventListener('click', () => {
+  icon.addEventListener('click', (e: MouseEvent) => {
+    e.preventDefault();
+    e.stopPropagation();
+    // Prevent the input from losing focus when clicking the icon
+    setTimeout(() => input.focus(), 0);
     openAutofillPopup(input);
   });
 
@@ -208,12 +212,7 @@ export function injectIcon(input: HTMLInputElement): void {
   /**
    * Remove icon when input loses focus, except when clicking the icon
    */
-  const handleBlur = (e: FocusEvent) : void => {
-    // Don't remove if clicking the icon itself
-    if (e.relatedTarget === icon) {
-      return;
-    }
-
+  const handleBlur = () : void => {
     // Fade out and remove icon
     icon.style.opacity = '0';
     setTimeout(() => {

browser-extensions/chrome/src/contentScript/Popup.ts

@@ -431,9 +431,6 @@ export function createAutofillPopup(input: HTMLInputElement, credentials: Creden
   // Add the event listener for clicking outside
   document.addEventListener('mousedown', handleClickOutside);
   document.body.appendChild(popup);
-
-  // When creating the popup, also (re)create the icon so it stays visible.
-  injectIcon(input);
 }
 
 /**
@@ -521,9 +518,6 @@ export function createVaultLockedPopup(input: HTMLInputElement): void {
   }, 100);
 
   document.body.appendChild(popup);
-
-  // When creating the popup, also (re)create the icon so it stays visible.
-  injectIcon(input);
 }
 
 /**

src/AliasVault.Client/wwwroot/index.template.html

@@ -15,7 +15,7 @@
 
     ==========================================================================================================
 
-    AliasVault - Free open-source password manager.
+    AliasVault - Free open-source password and (email) alias manager.
     Build (UTC): @BuildVersion
 
     Source code: https://github.com/lanedirt/AliasVault