From 2906b3200e10782dae17e4cb12f8fab84ae37de0 Mon Sep 17 00:00:00 2001
From: William Grant <willmgrant@gmail.com>
Date: Wed, 5 Jun 2024 14:48:59 +1000
Subject: [PATCH] fix: use input ref for password value instead of document
 lookup on pasword modal

---
 ts/components/dialog/EnterPasswordModal.tsx | 11 ++++++-----
 1 file changed, 6 insertions(+), 5 deletions(-)

diff --git a/ts/components/dialog/EnterPasswordModal.tsx b/ts/components/dialog/EnterPasswordModal.tsx
index 4c352ea69..0bca49bb6 100644
--- a/ts/components/dialog/EnterPasswordModal.tsx
+++ b/ts/components/dialog/EnterPasswordModal.tsx
@@ -1,6 +1,7 @@
 import { useDispatch } from 'react-redux';
 import styled from 'styled-components';
 
+import { useRef } from 'react';
 import { ToastUtils } from '../../session/utils';
 import { matchesHash } from '../../util/passwordUtils';
 
@@ -25,6 +26,8 @@ export type EnterPasswordModalProps = {
 
 export const EnterPasswordModal = (props: EnterPasswordModalProps) => {
   const { passwordHash, setPasswordValid, onClickOk, onClickClose, title } = props;
+
+  const passwordInputRef = useRef<HTMLInputElement>(null);
   const dispatch = useDispatch();
 
   const onClose = () => {
@@ -35,15 +38,13 @@ export const EnterPasswordModal = (props: EnterPasswordModalProps) => {
   };
 
   const confirmPassword = () => {
-    const passwordValue = (document.getElementById('seed-input-password') as any)?.value;
-    const isPasswordValid = matchesHash(passwordValue as string, passwordHash);
-
+    const passwordValue = passwordInputRef.current?.value;
     if (!passwordValue) {
       ToastUtils.pushToastError('enterPasswordErrorToast', window.i18n('noGivenPassword'));
-
       return;
     }
 
+    const isPasswordValid = matchesHash(passwordValue as string, passwordHash);
     if (passwordHash && !isPasswordValid) {
       ToastUtils.pushToastError('enterPasswordErrorToast', window.i18n('invalidPassword'));
       return;
@@ -76,7 +77,7 @@ export const EnterPasswordModal = (props: EnterPasswordModalProps) => {
         <div className="session-modal__input-group">
           <input
             type="password"
-            id="seed-input-password"
+            ref={passwordInputRef}
             data-testid="password-input"
             placeholder={window.i18n('enterPassword')}
             onKeyUp={onEnter}