From c179324de4bc4a00fbb96898d481e87262535482 Mon Sep 17 00:00:00 2001
From: DacongDA <dacongda1@sina.com>
Date: Sun, 17 Aug 2025 19:50:34 +0800
Subject: [PATCH] feat: fix bug that SelfLoginButton will re-render when
 username field updates (#4091)

---
 web/src/auth/LoginPage.js       | 6 ++++--
 web/src/auth/SelfLoginButton.js | 4 ++--
 2 files changed, 6 insertions(+), 4 deletions(-)

diff --git a/web/src/auth/LoginPage.js b/web/src/auth/LoginPage.js
index 2b79a69a..f91a330c 100644
--- a/web/src/auth/LoginPage.js
+++ b/web/src/auth/LoginPage.js
@@ -1179,11 +1179,13 @@ class LoginPage extends React.Component {
           {i18next.t("login:Continue with")}&nbsp;:
         </div>
         <br />
-        <SelfLoginButton account={this.props.account} onClick={() => {
+        <div onClick={() => {
           const values = {};
           values["application"] = application.name;
           this.login(values);
-        }} />
+        }}>
+          <SelfLoginButton account={this.props.account} />
+        </div>
         <br />
         <br />
         <div style={{fontSize: 16, textAlign: "left"}}>
diff --git a/web/src/auth/SelfLoginButton.js b/web/src/auth/SelfLoginButton.js
index 8f03b79f..c1ee1e37 100644
--- a/web/src/auth/SelfLoginButton.js
+++ b/web/src/auth/SelfLoginButton.js
@@ -12,7 +12,7 @@
 // See the License for the specific language governing permissions and
 // limitations under the License.
 
-import React from "react";
+import React, {memo} from "react";
 import {createButton} from "react-social-login-buttons";
 
 class SelfLoginButton extends React.Component {
@@ -44,4 +44,4 @@ class SelfLoginButton extends React.Component {
   }
 }
 
-export default SelfLoginButton;
+export default memo(SelfLoginButton);