From c7c98aa179d7367253ec969a50692b6d43e682c4 Mon Sep 17 00:00:00 2001
From: Charles Zhao <charleszhao@silverhand.io>
Date: Thu, 1 Dec 2022 20:56:40 +0800
Subject: [PATCH] fix(console): add language button should be hidden on click
 (#2565)

---
 .../AddLanguageSelector.module.scss           |  4 --
 .../LanguageEditor/AddLanguageSelector.tsx    | 43 ++++++++++---------
 2 files changed, 22 insertions(+), 25 deletions(-)

diff --git a/packages/console/src/pages/SignInExperience/tabs/Others/components/ManageLanguage/LanguageEditor/AddLanguageSelector.module.scss b/packages/console/src/pages/SignInExperience/tabs/Others/components/ManageLanguage/LanguageEditor/AddLanguageSelector.module.scss
index 02ac37f83..c24f9c293 100644
--- a/packages/console/src/pages/SignInExperience/tabs/Others/components/ManageLanguage/LanguageEditor/AddLanguageSelector.module.scss
+++ b/packages/console/src/pages/SignInExperience/tabs/Others/components/ManageLanguage/LanguageEditor/AddLanguageSelector.module.scss
@@ -49,9 +49,5 @@
       }
     }
   }
-
-  .hidden {
-    display: none;
-  }
 }
 
diff --git a/packages/console/src/pages/SignInExperience/tabs/Others/components/ManageLanguage/LanguageEditor/AddLanguageSelector.tsx b/packages/console/src/pages/SignInExperience/tabs/Others/components/ManageLanguage/LanguageEditor/AddLanguageSelector.tsx
index c4167f1fe..095392d39 100644
--- a/packages/console/src/pages/SignInExperience/tabs/Others/components/ManageLanguage/LanguageEditor/AddLanguageSelector.tsx
+++ b/packages/console/src/pages/SignInExperience/tabs/Others/components/ManageLanguage/LanguageEditor/AddLanguageSelector.tsx
@@ -1,6 +1,5 @@
 import type { LanguageTag } from '@logto/language-kit';
 import { languages as uiLanguageNameMapping } from '@logto/language-kit';
-import classNames from 'classnames';
 import type { ChangeEvent } from 'react';
 import { useEffect, useRef, useState } from 'react';
 import { useTranslation } from 'react-i18next';
@@ -66,26 +65,28 @@ const AddLanguageSelector = ({ options, onSelect }: Props) => {
   return (
     <div ref={selectorRef} className={style.languageSelector}>
       <div className={style.input}>
-        <Button
-          className={classNames(style.addLanguageButton, isDropDownOpen && style.hidden)}
-          icon={<Plus className={style.buttonIcon} />}
-          title="sign_in_exp.others.manage_language.add_language"
-          type="default"
-          size="medium"
-          onClick={() => {
-            setIsDropDownOpen(true);
-          }}
-        />
-        <TextInput
-          ref={searchInputRef}
-          icon={<SearchIcon className={style.buttonIcon} />}
-          className={classNames(!isDropDownOpen && style.hidden)}
-          placeholder={t('general.type_to_search')}
-          value={searchInputValue}
-          onChange={(event: ChangeEvent<HTMLInputElement>) => {
-            setSearchInputValue(event.target.value);
-          }}
-        />
+        {isDropDownOpen ? (
+          <TextInput
+            ref={searchInputRef}
+            icon={<SearchIcon className={style.buttonIcon} />}
+            placeholder={t('general.type_to_search')}
+            value={searchInputValue}
+            onChange={(event: ChangeEvent<HTMLInputElement>) => {
+              setSearchInputValue(event.target.value);
+            }}
+          />
+        ) : (
+          <Button
+            className={style.addLanguageButton}
+            icon={<Plus className={style.buttonIcon} />}
+            title="sign_in_exp.others.manage_language.add_language"
+            type="default"
+            size="medium"
+            onClick={() => {
+              setIsDropDownOpen(true);
+            }}
+          />
+        )}
       </div>
       {isDropDownOpen && filteredOptions.length > 0 && (
         <ul className={style.dropDown}>