From 5380737133484f52fa1eecf15cb6f207de366224 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Jakub=20Miko=C5=82ajczyk?= <j.mikolajczyk96@gmail.com>
Date: Wed, 20 Mar 2024 13:31:24 +0100
Subject: [PATCH 1/4] oct-1478: allocation slider thumb can not be moved
 outside the box

---
 client/src/components/ui/Slider/Slider.tsx | 15 +++++++++++++--
 1 file changed, 13 insertions(+), 2 deletions(-)

diff --git a/client/src/components/ui/Slider/Slider.tsx b/client/src/components/ui/Slider/Slider.tsx
index 0ecbc2affb..4e058324b7 100644
--- a/client/src/components/ui/Slider/Slider.tsx
+++ b/client/src/components/ui/Slider/Slider.tsx
@@ -1,5 +1,5 @@
 import cx from 'classnames';
-import React, { FC, useState, useEffect } from 'react';
+import React, { FC, useState, useEffect, useRef } from 'react';
 import ReactSlider from 'react-slider';
 
 import styles from './Slider.module.scss';
@@ -15,7 +15,8 @@ const Slider: FC<SliderProps> = ({
   hideThumb,
   ...rest
 }) => {
-  const [localValue, setLocalValue] = useState(value);
+  const reactSliderRef = useRef(null);
+  const [localValue, setLocalValue] = useState(0);
 
   useEffect(() => {
     if (value !== undefined && value !== localValue) {
@@ -40,9 +41,19 @@ const Slider: FC<SliderProps> = ({
     }
   };
 
+  useEffect(() => {
+    if (isDisabled || hideThumb || !reactSliderRef?.current) {
+      return;
+    }
+    // Calling handleResize() method solves the problem with rendering thumb outside the box.
+    // @ts-expect-error method isn't typed
+    reactSliderRef.current.handleResize();
+  }, [isDisabled, hideThumb]);
+
   return (
     <div className={cx(styles.root, className)}>
       <ReactSlider
+        ref={reactSliderRef}
         className={styles.slider}
         disabled={isDisabled || hideThumb}
         onChange={localOnChange}

From 1c2f2d10724b87055e072e725148dafec247e201 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Jakub=20Miko=C5=82ajczyk?= <j.mikolajczyk96@gmail.com>
Date: Wed, 20 Mar 2024 13:32:34 +0100
Subject: [PATCH 2/4] oct-1478: local value fix

---
 client/src/components/ui/Slider/Slider.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/client/src/components/ui/Slider/Slider.tsx b/client/src/components/ui/Slider/Slider.tsx
index 4e058324b7..ecaf16cffc 100644
--- a/client/src/components/ui/Slider/Slider.tsx
+++ b/client/src/components/ui/Slider/Slider.tsx
@@ -16,7 +16,7 @@ const Slider: FC<SliderProps> = ({
   ...rest
 }) => {
   const reactSliderRef = useRef(null);
-  const [localValue, setLocalValue] = useState(0);
+  const [localValue, setLocalValue] = useState(value);
 
   useEffect(() => {
     if (value !== undefined && value !== localValue) {

From 4965c91b43ec67be2c90b577b09e9919bd122abd Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Andrzej=20Zi=C3=B3=C5=82ek?= <a.j.ziolek@gmail.com>
Date: Wed, 20 Mar 2024 21:07:29 +0100
Subject: [PATCH 3/4] OCT-1457 Fix interaction issues with Lock/Unlock flow
 (#84)

---
 client/cypress/e2e/earn.cy.ts                 | 27 ++++++++++++-------
 .../EarnGlmLockTabs/EarnGlmLockTabs.tsx       |  3 ++-
 .../EarnGlmLockTabsInputs.tsx                 | 21 +++++++++------
 .../EarnGlmLockTabsInputs/types.ts            |  2 +-
 .../src/components/ui/InputText/InputText.tsx | 10 ++++++-
 client/src/components/ui/InputText/types.ts   |  1 +
 6 files changed, 43 insertions(+), 21 deletions(-)

diff --git a/client/cypress/e2e/earn.cy.ts b/client/cypress/e2e/earn.cy.ts
index 89993ec425..241f8836de 100644
--- a/client/cypress/e2e/earn.cy.ts
+++ b/client/cypress/e2e/earn.cy.ts
@@ -88,17 +88,27 @@ Object.values(viewports).forEach(({ device, viewportWidth, viewportHeight, isDes
       cy.get('[data-test=ModalGlmLock__overflow]').should('exist');
     });
 
+    it('Wallet connected: "ModalGlmLock" - changing tabs keep focus on first input', () => {
+      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=EarnGlmLockTabs__tab--1]').click();
+      cy.get('[data-test=InputsCryptoFiat__InputText--crypto]').should('have.focus');
+      cy.get('[data-test=EarnGlmLockTabs__tab--0]').click();
+      cy.get('[data-test=InputsCryptoFiat__InputText--crypto]').should('have.focus');
+    });
+
     it('Wallet connected: Lock 1 GLM', () => {
       connectWallet();
 
-      cy.get('[data-test=BoxGlmLock__Button]').click();
-      cy.get('[data-test=InputsCryptoFiat__InputText--crypto]').blur();
-      cy.get('[data-test=BudgetBox__currentlyLocked__value]')
+      cy.get('[data-test=BoxGlmLock__Section--current__DoubleValue__primary]')
         .invoke('text')
         .then(text => {
           const amountToLock = 1;
           const lockedGlms = parseInt(text, 10);
 
+          cy.get('[data-test=BoxGlmLock__Button]').click();
           cy.get('[data-test=InputsCryptoFiat__InputText--crypto]').clear().type(`${amountToLock}`);
           cy.get('[data-test=GlmLockTabs__Button]').should('have.text', 'Lock');
           cy.get('[data-test=GlmLockTabs__Button]').click();
@@ -142,18 +152,15 @@ Object.values(viewports).forEach(({ device, viewportWidth, viewportHeight, isDes
     it('Wallet connected: Unlock 1 GLM', () => {
       connectWallet();
 
-      cy.get('[data-test=BoxGlmLock__Button]').click();
-      cy.get('[data-test=InputsCryptoFiat__InputText--crypto]').blur();
-      cy.get('[data-test=BudgetBox__currentlyLocked__value]')
+      cy.get('[data-test=BoxGlmLock__Section--current__DoubleValue__primary]')
         .invoke('text')
         .then(text => {
           const amountToUnlock = 1;
           const lockedGlms = parseInt(text, 10);
 
-          cy.get('[data-test=BoxRounded__tab--1]').click();
-          cy.get('[data-test=InputsCryptoFiat__InputText--crypto]')
-            .clear()
-            .type(`${amountToUnlock}`);
+          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=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');
diff --git a/client/src/components/Earn/EarnGlmLock/EarnGlmLockTabs/EarnGlmLockTabs.tsx b/client/src/components/Earn/EarnGlmLock/EarnGlmLockTabs/EarnGlmLockTabs.tsx
index 0527fea723..4b3abd97b3 100644
--- a/client/src/components/Earn/EarnGlmLock/EarnGlmLockTabs/EarnGlmLockTabs.tsx
+++ b/client/src/components/Earn/EarnGlmLock/EarnGlmLockTabs/EarnGlmLockTabs.tsx
@@ -88,6 +88,7 @@ const EarnGlmLockTabs: FC<EarnGlmLockTabsProps> = ({
   return (
     <BoxRounded
       className={cx(styles.box, className)}
+      dataTest="EarnGlmLockTabs"
       isGrey
       tabs={[
         {
@@ -119,7 +120,6 @@ const EarnGlmLockTabs: FC<EarnGlmLockTabsProps> = ({
         error={formik.values.valueToDeposeOrWithdraw && formik.errors.valueToDeposeOrWithdraw}
         inputCryptoProps={{
           name: 'valueToDeposeOrWithdraw',
-          onChange: onSetValue,
           onClear: formik.resetForm,
           suffix: 'GLM',
           value: formik.values.valueToDeposeOrWithdraw,
@@ -155,6 +155,7 @@ const EarnGlmLockTabs: FC<EarnGlmLockTabsProps> = ({
             )}
           </div>
         }
+        onChange={onSetValue}
         onInputsFocusChange={onInputsFocusChange}
       />
       <Button
diff --git a/client/src/components/Earn/EarnGlmLock/EarnGlmLockTabsInputs/EarnGlmLockTabsInputs.tsx b/client/src/components/Earn/EarnGlmLock/EarnGlmLockTabsInputs/EarnGlmLockTabsInputs.tsx
index c3c8c91f48..d23dd7a15e 100644
--- a/client/src/components/Earn/EarnGlmLock/EarnGlmLockTabsInputs/EarnGlmLockTabsInputs.tsx
+++ b/client/src/components/Earn/EarnGlmLock/EarnGlmLockTabsInputs/EarnGlmLockTabsInputs.tsx
@@ -20,6 +20,7 @@ const EarnGlmLockTabsInputs = forwardRef<HTMLInputElement, EarnGlmLockTabsInputs
       label,
       inputCryptoProps,
       cryptoCurrency,
+      onChange,
       areInputsDisabled,
       dataTest = 'InputsCryptoFiat',
       onInputsFocusChange = () => {},
@@ -57,7 +58,7 @@ const EarnGlmLockTabsInputs = forwardRef<HTMLInputElement, EarnGlmLockTabsInputs
       const cryptoToFiat = valueComma ? (parseFloat(valueComma) * cryptoFiatRatio).toFixed(2) : '';
 
       setFiat(cryptoToFiat);
-      inputCryptoProps.onChange(valueComma);
+      onChange(valueComma);
     };
 
     const onFiatValueChange = (value: string) => {
@@ -69,7 +70,7 @@ const EarnGlmLockTabsInputs = forwardRef<HTMLInputElement, EarnGlmLockTabsInputs
 
       const fiatToCrypto = valueComma ? (parseFloat(valueComma) / cryptoFiatRatio).toFixed(18) : '';
       setFiat(valueComma);
-      inputCryptoProps.onChange(fiatToCrypto);
+      onChange(fiatToCrypto);
     };
 
     const handleClear = () => {
@@ -109,20 +110,23 @@ const EarnGlmLockTabsInputs = forwardRef<HTMLInputElement, EarnGlmLockTabsInputs
       <div className={cx(styles.root, isCryptoMainValueDisplay && styles.isCryptoMainValueDisplay)}>
         <InputText
           ref={isCryptoMainValueDisplay ? ref : undefined}
+          autocomplete="off"
           className={cx(styles.input, isCryptoMainValueDisplay && styles.isCryptoMainValueDisplay)}
           dataTest={`${dataTest}__InputText--crypto`}
           inputMode="decimal"
-          placeholder="0.00"
-          variant="simple"
-          {...inputCryptoPropsLabel}
-          autocomplete="off"
           isDisabled={areInputsDisabled}
           isErrorInlineVisible={false}
           onBlur={() => setIsCryptoInputFocused(false)}
-          onChange={e => onCryptoValueChange(e.target.value)}
+          onChange={e => {
+            onCryptoValueChange(e.target.value);
+          }}
           onClear={handleClear}
           onFocus={() => setIsCryptoInputFocused(true)}
+          placeholder="0.00"
           shouldAutoFocusAndSelect={isCryptoMainValueDisplay}
+          shouldAutoFocusAndSelectOnLabelChange
+          variant="simple"
+          {...inputCryptoPropsLabel}
         />
         <InputText
           ref={isCryptoMainValueDisplay ? undefined : ref}
@@ -137,10 +141,11 @@ const EarnGlmLockTabsInputs = forwardRef<HTMLInputElement, EarnGlmLockTabsInputs
           onClear={handleClear}
           onFocus={() => setIsFiatInputFocused(true)}
           placeholder="0.00"
+          shouldAutoFocusAndSelect={!isCryptoMainValueDisplay}
+          shouldAutoFocusAndSelectOnLabelChange
           suffix={displayCurrency.toUpperCase()}
           value={fiat}
           {...inputFiatPropsLabel}
-          shouldAutoFocusAndSelect={!isCryptoMainValueDisplay}
         />
       </div>
     );
diff --git a/client/src/components/Earn/EarnGlmLock/EarnGlmLockTabsInputs/types.ts b/client/src/components/Earn/EarnGlmLock/EarnGlmLockTabsInputs/types.ts
index 0aedbe00e8..97386c07a3 100644
--- a/client/src/components/Earn/EarnGlmLock/EarnGlmLockTabsInputs/types.ts
+++ b/client/src/components/Earn/EarnGlmLock/EarnGlmLockTabsInputs/types.ts
@@ -8,11 +8,11 @@ export default interface EarnGlmLockTabsInputsProps {
   error: string | undefined;
   inputCryptoProps: {
     name: InputTextProps['name'];
-    onChange: (value: string) => void;
     onClear?: InputTextProps['onClear'];
     suffix: InputTextProps['suffix'];
     value: InputTextProps['value'];
   };
   label: InputTextProps['label'];
+  onChange: (value: string) => void;
   onInputsFocusChange?: (isAnyInputFocused: boolean) => void;
 }
diff --git a/client/src/components/ui/InputText/InputText.tsx b/client/src/components/ui/InputText/InputText.tsx
index ec4607f36d..40f1bfc95f 100644
--- a/client/src/components/ui/InputText/InputText.tsx
+++ b/client/src/components/ui/InputText/InputText.tsx
@@ -29,6 +29,7 @@ const InputText = forwardRef<HTMLInputElement, InputTextProps>(
       showLoader = false,
       dataTest = 'InputText',
       shouldAutoFocusAndSelect = true,
+      shouldAutoFocusAndSelectOnLabelChange,
       ...rest
     },
     ref,
@@ -63,7 +64,14 @@ const InputText = forwardRef<HTMLInputElement, InputTextProps>(
       }
       inputRef.current.focus();
       inputRef.current.select();
-    }, [inputProps.ref, shouldAutoFocusAndSelect]);
+    }, [
+      inputProps.ref,
+      shouldAutoFocusAndSelect,
+      // eslint-disable-next-line react-hooks/exhaustive-deps
+      ...(shouldAutoFocusAndSelectOnLabelChange
+        ? [shouldAutoFocusAndSelectOnLabelChange, label]
+        : []),
+    ]);
 
     return (
       <div className={cx(styles.root, styles[`variant--${variant}`], className)}>
diff --git a/client/src/components/ui/InputText/types.ts b/client/src/components/ui/InputText/types.ts
index 37dce67bba..51171ae198 100644
--- a/client/src/components/ui/InputText/types.ts
+++ b/client/src/components/ui/InputText/types.ts
@@ -20,6 +20,7 @@ export default interface InputTextProps {
   onFocus?: FocusEventHandler<HTMLInputElement>;
   placeholder?: string;
   shouldAutoFocusAndSelect?: boolean;
+  shouldAutoFocusAndSelectOnLabelChange?: boolean;
   showLoader?: boolean;
   suffix?: string;
   suffixClassName?: string;

From 92e7a145df11aae1b6f0bcd733595fe0e82b272b Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Andrzej=20Zi=C3=B3=C5=82ek?= <a.j.ziolek@gmail.com>
Date: Thu, 21 Mar 2024 10:17:50 +0100
Subject: [PATCH 4/4] OCT-1488 Fix focus after each character in lock/unlock
 (#91)

---
 client/cypress/e2e/earn.cy.ts                 | 20 ++++++++++++++++++-
 .../EarnGlmLockTabs/EarnGlmLockTabs.tsx       |  1 +
 .../EarnGlmLockTabsInputs.tsx                 | 17 ++++++++--------
 .../EarnGlmLockTabsInputs/types.ts            |  2 ++
 .../src/components/ui/InputText/InputText.tsx |  7 +++----
 client/src/components/ui/InputText/types.ts   |  3 ++-
 6 files changed, 36 insertions(+), 14 deletions(-)

diff --git a/client/cypress/e2e/earn.cy.ts b/client/cypress/e2e/earn.cy.ts
index 241f8836de..66ad718963 100644
--- a/client/cypress/e2e/earn.cy.ts
+++ b/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');
diff --git a/client/src/components/Earn/EarnGlmLock/EarnGlmLockTabs/EarnGlmLockTabs.tsx b/client/src/components/Earn/EarnGlmLock/EarnGlmLockTabs/EarnGlmLockTabs.tsx
index 4b3abd97b3..6ee5c5a3d5 100644
--- a/client/src/components/Earn/EarnGlmLock/EarnGlmLockTabs/EarnGlmLockTabs.tsx
+++ b/client/src/components/Earn/EarnGlmLock/EarnGlmLockTabs/EarnGlmLockTabs.tsx
@@ -155,6 +155,7 @@ const EarnGlmLockTabs: FC<EarnGlmLockTabsProps> = ({
             )}
           </div>
         }
+        mode={currentMode}
         onChange={onSetValue}
         onInputsFocusChange={onInputsFocusChange}
       />
diff --git a/client/src/components/Earn/EarnGlmLock/EarnGlmLockTabsInputs/EarnGlmLockTabsInputs.tsx b/client/src/components/Earn/EarnGlmLock/EarnGlmLockTabsInputs/EarnGlmLockTabsInputs.tsx
index d23dd7a15e..3851ed582c 100644
--- a/client/src/components/Earn/EarnGlmLock/EarnGlmLockTabsInputs/EarnGlmLockTabsInputs.tsx
+++ b/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}
diff --git a/client/src/components/Earn/EarnGlmLock/EarnGlmLockTabsInputs/types.ts b/client/src/components/Earn/EarnGlmLock/EarnGlmLockTabsInputs/types.ts
index 97386c07a3..a9ef59eeee 100644
--- a/client/src/components/Earn/EarnGlmLock/EarnGlmLockTabsInputs/types.ts
+++ b/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;
 }
diff --git a/client/src/components/ui/InputText/InputText.tsx b/client/src/components/ui/InputText/InputText.tsx
index 40f1bfc95f..1a41abf43f 100644
--- a/client/src/components/ui/InputText/InputText.tsx
+++ b/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 (
diff --git a/client/src/components/ui/InputText/types.ts b/client/src/components/ui/InputText/types.ts
index 51171ae198..ab779f05b9 100644
--- a/client/src/components/ui/InputText/types.ts
+++ b/client/src/components/ui/InputText/types.ts
@@ -13,6 +13,7 @@ export default interface InputTextProps {
   isDisabled?: boolean;
   isErrorInlineVisible?: boolean;
   label?: string | ReactNode;
+  mode?: string;
   name?: string;
   onBlur?: FocusEventHandler<HTMLInputElement>;
   onChange?: (event: ChangeEvent<HTMLInputElement>) => void;
@@ -20,7 +21,7 @@ export default interface InputTextProps {
   onFocus?: FocusEventHandler<HTMLInputElement>;
   placeholder?: string;
   shouldAutoFocusAndSelect?: boolean;
-  shouldAutoFocusAndSelectOnLabelChange?: boolean;
+  shouldAutoFocusAndSelectOnModeChange?: boolean;
   showLoader?: boolean;
   suffix?: string;
   suffixClassName?: string;