OCT-1488 Fix focus after each character in lock/unlock (#91)

Author: aziolek

client/cypress/e2e/earn.cy.ts

@@ -88,6 +88,22 @@ Object.values(viewports).forEach(({ device, viewportWidth, viewportHeight, isDes
       cy.get('[data-test=ModalGlmLock__overflow]').should('exist');
     });
 
+    it('Wallet connected: inputs allow to type multiple characters without focus problems', () => {
+      /**
+       * In EarnGlmLock there are multiple autofocus rules set.
+       * This test checks if user is still able to type without any autofocus disruption.
+       */
+      connectWallet();
+      cy.get('[data-test=BoxGlmLock__Button]').click();
+      cy.get('[data-test=ModalGlmLock]').should('be.visible');
+      cy.get('[data-test=InputsCryptoFiat__InputText--crypto]').should('have.focus');
+      cy.get('[data-test=InputsCryptoFiat__InputText--crypto]').clear().type('100');
+      cy.get('[data-test=InputsCryptoFiat__InputText--crypto]').should('have.value', '100');
+      cy.get('[data-test=EarnGlmLockTabs__tab--1]').click();
+      cy.get('[data-test=InputsCryptoFiat__InputText--crypto]').clear().type('100');
+      cy.get('[data-test=InputsCryptoFiat__InputText--crypto]').should('have.value', '100');
+    });
+
     it('Wallet connected: "ModalGlmLock" - changing tabs keep focus on first input', () => {
       connectWallet();
       cy.get('[data-test=BoxGlmLock__Button]').click();
@@ -160,7 +176,9 @@ Object.values(viewports).forEach(({ device, viewportWidth, viewportHeight, isDes
 
           cy.get('[data-test=BoxGlmLock__Button]').click();
           cy.get('[data-test=EarnGlmLockTabs__tab--1]').click();
-          cy.get('[data-test=InputsCryptoFiat__InputText--crypto]').clear().type(`${amountToUnlock}`);
+          cy.get('[data-test=InputsCryptoFiat__InputText--crypto]')
+            .clear()
+            .type(`${amountToUnlock}`);
           cy.get('[data-test=GlmLockTabs__Button]').should('have.text', 'Unlock');
           cy.get('[data-test=GlmLockTabs__Button]').click();
           cy.get('[data-test=GlmLockTabs__Button]').should('have.text', 'Waiting for confirmation');

client/src/components/Earn/EarnGlmLock/EarnGlmLockTabs/EarnGlmLockTabs.tsx

@@ -155,6 +155,7 @@ const EarnGlmLockTabs: FC<EarnGlmLockTabsProps> = ({
             )}
           </div>
         }
+        mode={currentMode}
         onChange={onSetValue}
         onInputsFocusChange={onInputsFocusChange}
       />

client/src/components/Earn/EarnGlmLock/EarnGlmLockTabsInputs/EarnGlmLockTabsInputs.tsx

@@ -16,13 +16,14 @@ import EarnGlmLockTabsInputsProps from './types';
 const EarnGlmLockTabsInputs = forwardRef<HTMLInputElement, EarnGlmLockTabsInputsProps>(
   (
     {
+      areInputsDisabled,
+      cryptoCurrency,
+      dataTest = 'InputsCryptoFiat',
       error,
-      label,
       inputCryptoProps,
-      cryptoCurrency,
+      label,
+      mode,
       onChange,
-      areInputsDisabled,
-      dataTest = 'InputsCryptoFiat',
       onInputsFocusChange = () => {},
     },
     ref,
@@ -42,9 +43,9 @@ const EarnGlmLockTabsInputs = forwardRef<HTMLInputElement, EarnGlmLockTabsInputs
     const isAnyInputFocused = useDeferredValue(isCryptoInputFocused || isFiatInputFocused);
 
     const inputCryptoPropsLabel = isCryptoMainValueDisplay
-      ? { ...inputCryptoProps, error, label }
+      ? { ...inputCryptoProps, error, label, mode }
       : { ...inputCryptoProps, error };
-    const inputFiatPropsLabel = isCryptoMainValueDisplay ? { error } : { error, label };
+    const inputFiatPropsLabel = isCryptoMainValueDisplay ? { error } : { error, label, mode };
 
     const cryptoFiatRatio = cryptoValues?.[cryptoCurrency][displayCurrency || 'usd'] || 1;
 
@@ -124,7 +125,7 @@ const EarnGlmLockTabsInputs = forwardRef<HTMLInputElement, EarnGlmLockTabsInputs
           onFocus={() => setIsCryptoInputFocused(true)}
           placeholder="0.00"
           shouldAutoFocusAndSelect={isCryptoMainValueDisplay}
-          shouldAutoFocusAndSelectOnLabelChange
+          shouldAutoFocusAndSelectOnModeChange
           variant="simple"
           {...inputCryptoPropsLabel}
         />
@@ -142,7 +143,7 @@ const EarnGlmLockTabsInputs = forwardRef<HTMLInputElement, EarnGlmLockTabsInputs
           onFocus={() => setIsFiatInputFocused(true)}
           placeholder="0.00"
           shouldAutoFocusAndSelect={!isCryptoMainValueDisplay}
-          shouldAutoFocusAndSelectOnLabelChange
+          shouldAutoFocusAndSelectOnModeChange
           suffix={displayCurrency.toUpperCase()}
           value={fiat}
           {...inputFiatPropsLabel}

client/src/components/Earn/EarnGlmLock/EarnGlmLockTabsInputs/types.ts

@@ -1,3 +1,4 @@
+import { CurrentMode } from 'components/Earn/EarnGlmLock/types';
 import InputTextProps from 'components/ui/InputText/types';
 import { CryptoCurrency } from 'types/cryptoCurrency';
 
@@ -13,6 +14,7 @@ export default interface EarnGlmLockTabsInputsProps {
     value: InputTextProps['value'];
   };
   label: InputTextProps['label'];
+  mode: CurrentMode;
   onChange: (value: string) => void;
   onInputsFocusChange?: (isAnyInputFocused: boolean) => void;
 }

client/src/components/ui/InputText/InputText.tsx

@@ -19,6 +19,7 @@ const InputText = forwardRef<HTMLInputElement, InputTextProps>(
       isDisabled,
       isErrorInlineVisible = true,
       label,
+      mode,
       onChange,
       onClear,
       suffix,
@@ -29,7 +30,7 @@ const InputText = forwardRef<HTMLInputElement, InputTextProps>(
       showLoader = false,
       dataTest = 'InputText',
       shouldAutoFocusAndSelect = true,
-      shouldAutoFocusAndSelectOnLabelChange,
+      shouldAutoFocusAndSelectOnModeChange,
       ...rest
     },
     ref,
@@ -68,9 +69,7 @@ const InputText = forwardRef<HTMLInputElement, InputTextProps>(
       inputProps.ref,
       shouldAutoFocusAndSelect,
       // eslint-disable-next-line react-hooks/exhaustive-deps
-      ...(shouldAutoFocusAndSelectOnLabelChange
-        ? [shouldAutoFocusAndSelectOnLabelChange, label]
-        : []),
+      ...(shouldAutoFocusAndSelectOnModeChange ? [shouldAutoFocusAndSelectOnModeChange, mode] : []),
     ]);
 
     return (

client/src/components/ui/InputText/types.ts

@@ -13,14 +13,15 @@ export default interface InputTextProps {
   isDisabled?: boolean;
   isErrorInlineVisible?: boolean;
   label?: string | ReactNode;
+  mode?: string;
   name?: string;
   onBlur?: FocusEventHandler<HTMLInputElement>;
   onChange?: (event: ChangeEvent<HTMLInputElement>) => void;
   onClear?: () => void;
   onFocus?: FocusEventHandler<HTMLInputElement>;
   placeholder?: string;
   shouldAutoFocusAndSelect?: boolean;
-  shouldAutoFocusAndSelectOnLabelChange?: boolean;
+  shouldAutoFocusAndSelectOnModeChange?: boolean;
   showLoader?: boolean;
   suffix?: string;
   suffixClassName?: string;