fix: Force focus on input elements in AppLock modal (#10704)

wireapp · Mar 9, 2021 · 281f2a9 · 281f2a9
1 parent 9c10199
commit 281f2a9
Showing 1 changed file with 11 additions and 0 deletions.
diff --git a/src/script/page/AppLock.tsx b/src/script/page/AppLock.tsx
@@ -65,6 +65,9 @@ const AppLock: React.FC<AppLockProps> = ({
   const [inactivityTimeoutId, setInactivityTimeoutId] = useState<number>();
   const [scheduledTimeoutId, setScheduledTimeoutId] = useState<number>();
 
+  const focusElement = (input: HTMLInputElement) => setTimeout(() => input?.focus());
+  const forceFocus = ({target}: React.FocusEvent<HTMLInputElement>) => focusElement(target);
+
   const {current: appObserver} = useRef(
     new MutationObserver(mutationRecords => {
       const [{attributeName}] = mutationRecords;
@@ -307,6 +310,8 @@ const AppLock: React.FC<AppLockProps> = ({
               data-uie-status={isSetupPassphraseValid ? 'valid' : 'invalid'}
               data-uie-name="input-applock-set-a"
               autoComplete="new-password"
+              onBlur={forceFocus}
+              ref={focusElement}
             />
             <div className={`modal__passcode__info ${isSetupPassphraseLength ? 'modal__passcode__info--valid' : ''}`}>
               {t('modalAppLockSetupLong', {
@@ -361,6 +366,8 @@ const AppLock: React.FC<AppLockProps> = ({
               data-uie-status={isSetupPassphraseValid ? 'valid' : 'invalid'}
               data-uie-name="input-applock-set-a"
               autoComplete="new-password"
+              onBlur={forceFocus}
+              ref={focusElement}
             />
             <div className={`modal__passcode__info ${isSetupPassphraseLength ? 'modal__passcode__info--valid' : ''}`}>
               {t('modalAppLockSetupLong', {
@@ -405,6 +412,8 @@ const AppLock: React.FC<AppLockProps> = ({
               onKeyDown={clearUnlockError}
               data-uie-name="input-applock-unlock"
               autoComplete="new-password"
+              onBlur={forceFocus}
+              ref={focusElement}
             />
             <div className="modal__input__error" data-uie-name="label-applock-unlock-error">
               {unlockError}
@@ -476,6 +485,8 @@ const AppLock: React.FC<AppLockProps> = ({
               placeholder={t('modalAppLockWipePasswordPlaceholder')}
               onKeyDown={clearWipeError}
               data-uie-name="input-applock-wipe"
+              onBlur={forceFocus}
+              ref={focusElement}
             />
             <div className="modal__input__error" style={{height: 20}} data-uie-name="label-applock-wipe-error">
               {wipeError}