From 15a9a85f0aa8859284cf697c01d157d9e5f91dd7 Mon Sep 17 00:00:00 2001
From: Joffrey JAFFEUX <j.jaffeux@gmail.com>
Date: Mon, 22 Mar 2021 12:51:18 +0100
Subject: [PATCH] FIX: ensures invisible link is not interfering with UI/tab
 order (#12472)

---
 .../discourse/app/templates/modal/login.hbs          |  2 +-
 app/assets/stylesheets/common/base/login.scss        | 12 +++++++-----
 2 files changed, 8 insertions(+), 6 deletions(-)

diff --git a/app/assets/javascripts/discourse/app/templates/modal/login.hbs b/app/assets/javascripts/discourse/app/templates/modal/login.hbs
index 4940173d7d6..6de18a9980c 100644
--- a/app/assets/javascripts/discourse/app/templates/modal/login.hbs
+++ b/app/assets/javascripts/discourse/app/templates/modal/login.hbs
@@ -14,7 +14,7 @@
               {{input value=loginName type="email" id="login-account-name" class=(value-entered loginName) autocomplete="username" autocorrect="off" autocapitalize="off" disabled=showSecondFactor autofocus="autofocus"}}
               <label class="alt-placeholder" for="login-account-name">{{i18n "login.email_placeholder"}}</label>
               {{#if showLoginWithEmailLink}}
-                <a href id="email-login-link" {{action (unless processingEmailLink "emailLogin")}}>
+                <a href class={{if loginName "" "no-login-filled"}} id="email-login-link" {{action (unless processingEmailLink "emailLogin")}}>
                   {{i18n "email_login.login_link"}}
                 </a>
               {{/if}}
diff --git a/app/assets/stylesheets/common/base/login.scss b/app/assets/stylesheets/common/base/login.scss
index 9c842d8337b..ea485a7a8a9 100644
--- a/app/assets/stylesheets/common/base/login.scss
+++ b/app/assets/stylesheets/common/base/login.scss
@@ -161,17 +161,19 @@
       }
 
       #email-login-link {
-        opacity: 0;
+        transition: opacity 0.5s;
+
+        &.no-login-filled {
+          opacity: 0;
+          visibility: hidden;
+        }
       }
 
       #forgot-password-link,
       #email-login-link {
         font-size: $font-down-1;
       }
-      input.value-entered + label.alt-placeholder + #email-login-link {
-        opacity: 1;
-        transition: opacity 0.5s;
-      }
+
       .tip:not(:empty) + label.more-info {
         display: none;
       }