From 225e9cf70a552d8d373df0fe1a981d5f3effddfa Mon Sep 17 00:00:00 2001
From: Yaodong Yu <2814461814@qq.com>
Date: Wed, 24 May 2023 23:27:04 +0800
Subject: [PATCH] fix: set initial value in CountryCodeSelect (#1890)

---
 web/src/auth/MfaSetupPage.js               | 7 ++++---
 web/src/common/select/CountryCodeSelect.js | 4 +++-
 2 files changed, 7 insertions(+), 4 deletions(-)

diff --git a/web/src/auth/MfaSetupPage.js b/web/src/auth/MfaSetupPage.js
index 44845f7a..d87359a0 100644
--- a/web/src/auth/MfaSetupPage.js
+++ b/web/src/auth/MfaSetupPage.js
@@ -78,6 +78,7 @@ function CheckPasswordForm({user, onSuccess, onFail}) {
 
 export function MfaVerifyForm({mfaProps, application, user, onSuccess, onFail}) {
   const [form] = Form.useForm();
+  mfaProps = mfaProps ?? {type: ""};
 
   const onFinish = ({passcode}) => {
     const data = {passcode, type: mfaProps.type, ...user};
@@ -97,9 +98,9 @@ export function MfaVerifyForm({mfaProps, application, user, onSuccess, onFail})
       });
   };
 
-  if (mfaProps?.type === SmsMfaType) {
+  if (mfaProps.type === SmsMfaType) {
     return <MfaSmsVerifyForm onFinish={onFinish} application={application} />;
-  } else if (mfaProps?.type === TotpMfaType) {
+  } else if (mfaProps.type === TotpMfaType) {
     return <MfaTotpVerifyForm onFinish={onFinish} mfaProps={mfaProps} />;
   } else {
     return <div></div>;
@@ -160,7 +161,7 @@ class MfaSetupPage extends React.Component {
   }
 
   componentDidUpdate(prevProps, prevState, snapshot) {
-    if (prevState.isAuthenticated === true && this.state.mfaProps === null) {
+    if (this.state.isAuthenticated === true && this.state.mfaProps === null) {
       MfaBackend.MfaSetupInitiate({
         type: this.state.type,
         ...this.getUser(),
diff --git a/web/src/common/select/CountryCodeSelect.js b/web/src/common/select/CountryCodeSelect.js
index 10da825f..ee042eb7 100644
--- a/web/src/common/select/CountryCodeSelect.js
+++ b/web/src/common/select/CountryCodeSelect.js
@@ -17,10 +17,12 @@ import * as Setting from "../../Setting";
 import React from "react";
 
 export const CountryCodeSelect = (props) => {
-  const {onChange, style, disabled, value} = props;
+  const {onChange, style, disabled} = props;
   const countryCodes = props.countryCodes ?? [];
+  const [value, setValue] = React.useState(countryCodes.length > 0 ? countryCodes[0] : "");
 
   const handleOnChange = (value) => {
+    setValue(value);
     onChange?.(value);
   };