From f771782b91598f7590bee313ec019753fd8ccddf Mon Sep 17 00:00:00 2001
From: Amitabh Aggarwal <aggarwal.amitabh@gmail.com>
Date: Thu, 5 Dec 2024 08:31:28 -0600
Subject: [PATCH] fix: update input handling in useInputHandler to support BACK
 key functionality (#12567)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

## **Description**

This PR updates the `handleKeypadChange` function in `useInputHandler`
to allow for better input management. The function now also checks for
the 'BACK' key press and allows input only if the total number of digits
is within the defined limit. This change improves user experience by
enabling backspace functionality while maintaining input constraints.

## **Related issues**

Fixes:
[STAKE-886](https://consensyssoftware.atlassian.net/browse/STAKE-886)

## **Manual testing steps**

1. Start the app
2. Go to Earn and input high ETH input such that fiat value is more than
12 digits
3. Click on currency switch button
4. Press back button on keypad and it should edit the fiat amount even
though the digits are more than 12

## **Screenshots/Recordings**




### **Before**


https://github.com/user-attachments/assets/1c6986fc-484e-442f-831b-6d6df162f88a

### **After**

[<!-- [screenshots/recordings]
-->](https://github.com/user-attachments/assets/1a11f801-97f0-436c-9726-0ec3b687e70f)

## **Pre-merge author checklist**

- [x] I’ve followed [MetaMask Contributor
Docs](https://github.com/MetaMask/contributor-docs) and [MetaMask Mobile
Coding
Standards](https://github.com/MetaMask/metamask-mobile/blob/main/.github/guidelines/CODING_GUIDELINES.md).
- [x] I've completed the PR template to the best of my ability
- [x] I’ve included tests if applicable
- [x] I’ve documented my code using [JSDoc](https://jsdoc.app/) format
if applicable
- [x] I’ve applied the right labels on the PR (see [labeling
guidelines](https://github.com/MetaMask/metamask-mobile/blob/main/.github/guidelines/LABELING_GUIDELINES.md)).
Not required for external contributors.

## **Pre-merge reviewer checklist**

- [ ] I've manually tested the PR (e.g. pull and build branch, run the
app, test code being changed).
- [ ] I confirm that this PR addresses all acceptance criteria described
in the ticket it closes and includes the necessary testing evidence such
as recordings and or screenshots.


[STAKE-886]:
https://consensyssoftware.atlassian.net/browse/STAKE-886?atlOrigin=eyJpIjoiNWRkNTljNzYxNjVmNDY3MDlhMDU5Y2ZhYzA5YTRkZjUiLCJwIjoiZ2l0aHViLWNvbS1KU1cifQ
---
 app/components/UI/Stake/hooks/useInputHandler.ts | 7 +++----
 1 file changed, 3 insertions(+), 4 deletions(-)

diff --git a/app/components/UI/Stake/hooks/useInputHandler.ts b/app/components/UI/Stake/hooks/useInputHandler.ts
index 9a4271f0fef..d54b18c2295 100644
--- a/app/components/UI/Stake/hooks/useInputHandler.ts
+++ b/app/components/UI/Stake/hooks/useInputHandler.ts
@@ -70,15 +70,14 @@ const useInputHandler = ({ balance }: InputHandlerParams) => {
   );
 
   const handleKeypadChange = useCallback(
-    ({ value }) => {
+    ({ value, pressedKey }) => {
       const digitsOnly = value.replace(/[^0-9.]/g, '');
       const [whole = '', fraction = ''] = digitsOnly.split('.');
       const totalDigits = whole.length + fraction.length;
 
-      if (totalDigits > MAX_DIGITS) {
-        return;
+      if (pressedKey === 'BACK' || totalDigits <= MAX_DIGITS) {
+        isEth ? handleEthInput(value) : handleFiatInput(value);
       }
-      isEth ? handleEthInput(value) : handleFiatInput(value);
     },
     [handleEthInput, handleFiatInput, isEth],
   );