diff --git a/src/features/decoder/components/jwt-input.component.tsx b/src/features/decoder/components/jwt-input.component.tsx index 1baef8dd..17274b92 100644 --- a/src/features/decoder/components/jwt-input.component.tsx +++ b/src/features/decoder/components/jwt-input.component.tsx @@ -25,10 +25,9 @@ export const JwtInputComponent: React.FC = ({ languageCode, dictionary, }) => { - const [autoFocusEnabled, setAutofocusEnabled] = useState(() => { - const saved = localStorage.getItem("autofocus-enabled"); - return saved ? !!JSON.parse(saved) : false - }); + const [autoFocusEnabled, setAutofocusEnabled] = useState( + undefined + ); const handleJwtChange$ = useDecoderStore((state) => state.handleJwtChange); const jwt$ = useDecoderStore((state) => state.jwt); const decodeErrors$ = useDecoderStore((state) => state.decodingErrors); @@ -52,9 +51,14 @@ export const JwtInputComponent: React.FC = ({ }; const handleCheckboxChange = (selected: boolean) => { - localStorage.setItem("autofocus-enabled", JSON.stringify(selected)) - setAutofocusEnabled(selected) - } + localStorage.setItem("autofocus-enabled", JSON.stringify(selected)); + setAutofocusEnabled(selected); + }; + + useEffect(() => { + const saved = localStorage.getItem("autofocus-enabled"); + setAutofocusEnabled(saved ? !!JSON.parse(saved) : false); + }, []); useEffect(() => { setToken(jwt$); @@ -64,7 +68,10 @@ export const JwtInputComponent: React.FC = ({ <>
{dictionary.headline} - handleCheckboxChange(e)}> + handleCheckboxChange(e)} + > Enable auto-focus
@@ -99,7 +106,13 @@ export const JwtInputComponent: React.FC = ({ ), }} > - + {autoFocusEnabled !== undefined ? ( + + ) : null} );