From 891e750a971a2a0333d2acb471c6cae1c242c5b8 Mon Sep 17 00:00:00 2001
From: Sakamoto Shiina <68018796+ShiinaSakamoto@users.noreply.github.com>
Date: Mon, 5 Aug 2024 07:48:01 +0900
Subject: [PATCH] [Update] Config Window: DeeplAuthKey. to focus input
 component when edit button clicked.

---
 .../setting_box/components/_atoms/_Entry.jsx   | 18 +++++++++++++++---
 .../components/deepl_auth_key/DeeplAuthKey.jsx |  9 +++++----
 2 files changed, 20 insertions(+), 7 deletions(-)

diff --git a/src-ui/windows/config_window/setting_section/setting_box/components/_atoms/_Entry.jsx b/src-ui/windows/config_window/setting_section/setting_box/components/_atoms/_Entry.jsx
index 5a5a3f6f..317f9ee1 100644
--- a/src-ui/windows/config_window/setting_section/setting_box/components/_atoms/_Entry.jsx
+++ b/src-ui/windows/config_window/setting_section/setting_box/components/_atoms/_Entry.jsx
@@ -1,8 +1,9 @@
-import React, { useState } from "react";
+import React, { useState, useRef, forwardRef, useImperativeHandle } from "react";
 import styles from "./_Entry.module.scss";
 
-export const _Entry = ({ width, onChange, initialValue = "" }) => {
+const _Entry = forwardRef(({ width, onChange, initialValue = "" }, ref) => {
     const [input_value, setInputValue] = useState(initialValue);
+    const inputRef = useRef();
 
     const onChangeFunction = (e) => {
         setInputValue(e.currentTarget.value);
@@ -11,6 +12,12 @@ export const _Entry = ({ width, onChange, initialValue = "" }) => {
         }
     };
 
+    useImperativeHandle(ref, () => ({
+        focus: () => {
+            inputRef.current.focus();
+        }
+    }));
+
     return (
         <div className={styles.entry_container}>
             <div
@@ -18,6 +25,7 @@ export const _Entry = ({ width, onChange, initialValue = "" }) => {
                 style={{ width }}
             >
                 <input
+                    ref={inputRef}
                     className={styles.entry_input_area}
                     value={input_value}
                     onChange={onChangeFunction}
@@ -25,4 +33,8 @@ export const _Entry = ({ width, onChange, initialValue = "" }) => {
             </div>
         </div>
     );
-};
+});
+
+_Entry.displayName = "_Entry";
+
+export { _Entry };
\ No newline at end of file
diff --git a/src-ui/windows/config_window/setting_section/setting_box/components/deepl_auth_key/DeeplAuthKey.jsx b/src-ui/windows/config_window/setting_section/setting_box/components/deepl_auth_key/DeeplAuthKey.jsx
index 105c4d7e..d810520d 100644
--- a/src-ui/windows/config_window/setting_section/setting_box/components/deepl_auth_key/DeeplAuthKey.jsx
+++ b/src-ui/windows/config_window/setting_section/setting_box/components/deepl_auth_key/DeeplAuthKey.jsx
@@ -1,21 +1,21 @@
 import styles from "./DeeplAuthKey.module.scss";
 import { useTranslation } from "react-i18next";
-
 import clsx from "clsx";
 import ExternalLink from "@images/external_link.svg?react";
 import { _Entry } from "../_atoms/_Entry";
-import { useState } from "react";
+import { useState, useRef } from "react";
 
 export const DeeplAuthKey = () => {
     const { t } = useTranslation();
     const [is_editable, seIsEditable] = useState(false);
     const [input_value, seInputValue] = useState("");
+    const entryRef = useRef(null);
 
     const revealEditAuthKey = () => {
         seIsEditable(true);
+        entryRef.current.focus();
     };
 
-
     const onchangeEntryAuthKey = (e) => {
         seInputValue(e.target.value);
     };
@@ -26,7 +26,7 @@ export const DeeplAuthKey = () => {
     return (
         <div className={styles.container}>
             <div className={styles.entry_section_wrapper}>
-                <_Entry width="32rem" onChange={onchangeEntryAuthKey}/>
+                <_Entry ref={entryRef} width="32rem" onChange={onchangeEntryAuthKey}/>
                 <button className={styles.save_button} onClick={saveAuthKey}>Save</button>
                 {is_editable
                 ? null
@@ -40,6 +40,7 @@ export const DeeplAuthKey = () => {
     );
 };
 
+
 export const OpenWebpage_DeeplAuthKey = () => {
     return (
         <div className={styles.open_webpage_button_wrapper}>