diff --git a/src/App.tsx b/src/App.tsx index bae0609..77d2585 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -395,6 +395,12 @@ function App() { const seedPhrase = generatorRef.current.parsedString saveSeedPhraseToDisk(seedPhrase) } + const passwordRef = useRef(null); + useEffect(() => { + if (extState === "wallet-dropped" && passwordRef.current) { + passwordRef.current.focus(); + } + }, [extState]); useEffect(() => { const isDevModeFromStorage = localStorage.getItem("isEnabledDevMode"); if (isDevModeFromStorage) { @@ -2318,6 +2324,7 @@ function App() { authenticateWallet(); } }} + ref={passwordRef} /> diff --git a/src/components/PasswordField/PasswordField.tsx b/src/components/PasswordField/PasswordField.tsx index 12002d6..4ff4a80 100644 --- a/src/components/PasswordField/PasswordField.tsx +++ b/src/components/PasswordField/PasswordField.tsx @@ -1,5 +1,5 @@ import { Button, InputAdornment, TextField, TextFieldProps, styled } from "@mui/material"; -import { useState } from 'react' +import { forwardRef, useState } from 'react' export const CustomInput = styled(TextField)({ width: "183px", // Adjust the width as needed @@ -41,7 +41,7 @@ export const CustomInput = styled(TextField)({ }); -export const PasswordField: React.FunctionComponent = ({ ...props }) => { +export const PasswordField = forwardRef( ({ ...props }, ref) => { const [canViewPassword, setCanViewPassword] = useState(false); return ( = ({ ...prop ) }} + inputRef={ref} {...props} /> ) -} \ No newline at end of file +}); \ No newline at end of file