From 31915a6a7d5ec7dc7dffe004842491a616222e63 Mon Sep 17 00:00:00 2001
From: Micaela Estabillo <100321200+micaelae@users.noreply.github.com>
Date: Tue, 14 Jan 2025 17:21:45 -0800
Subject: [PATCH] fix: focused search field forces scroll (#29676)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

<!--
Please submit this PR as a draft initially.
Do not mark it as "Ready for review" until the template has been
completely filled out, and PR status checks have passed at least once.
-->

## **Description**
The bridge page's input fields are auto-focused by default, which forces
the AssetPicker's search input field to keep re-focusing when it's open.
As a result, the asset list keeps scrolling up to the top of the modal.

<!--
Write a short description of the changes included in this pull request,
also include relevant motivation and context. Have in mind the following
questions:
1. What is the reason for the change?
2. What is the improvement/solution?
-->

[![Open in GitHub
Codespaces](https://github.com/codespaces/badge.svg)](https://codespaces.new/MetaMask/metamask-extension/pull/29676?quickstart=1)

## **Related issues**

Fixes: https://consensyssoftware.atlassian.net/browse/MMS-1856

## **Manual testing steps**

1. Load bridge page
2. Click src token picker and verify search input component is focused
3. Scroll to bottom of asset list and wait a 5 or more seconds
4. Verify that modal does not scroll back up to search input component

## **Screenshots/Recordings**

<!-- If applicable, add screenshots and/or recordings to visualize the
before and after of your change. -->

### **Before**
![Screenshot 2025-01-13 at 2 36
23 PM](https://github.com/user-attachments/assets/8a5d3296-b7ff-4caf-89b3-5e35eb8f466e)

### **After**

![Screenshot 2025-01-13 at 2 35
33 PM](https://github.com/user-attachments/assets/f9c60d55-bb94-42dd-81f5-b042f0000f6e)

## **Pre-merge author checklist**

- [X] I've followed [MetaMask Contributor
Docs](https://github.com/MetaMask/contributor-docs) and [MetaMask
Extension Coding
Standards](https://github.com/MetaMask/metamask-extension/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-extension/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.
---
 ui/pages/bridge/prepare/bridge-input-group.tsx | 11 +++++------
 1 file changed, 5 insertions(+), 6 deletions(-)

diff --git a/ui/pages/bridge/prepare/bridge-input-group.tsx b/ui/pages/bridge/prepare/bridge-input-group.tsx
index 6c75c703e22b..84cfd4216361 100644
--- a/ui/pages/bridge/prepare/bridge-input-group.tsx
+++ b/ui/pages/bridge/prepare/bridge-input-group.tsx
@@ -89,15 +89,15 @@ export const BridgeInputGroup = ({
 
   const inputRef = useRef<HTMLInputElement | null>(null);
 
+  const isAmountReadOnly =
+    amountFieldProps?.readOnly || amountFieldProps?.disabled;
+
   useEffect(() => {
-    if (inputRef.current) {
+    if (!isAmountReadOnly && inputRef.current) {
       inputRef.current.value = amountFieldProps?.value?.toString() ?? '';
       inputRef.current.focus();
     }
-  }, [amountFieldProps]);
-
-  const isAmountReadOnly =
-    amountFieldProps?.readOnly || amountFieldProps?.disabled;
+  }, [amountFieldProps?.value, isAmountReadOnly, token]);
 
   return (
     <Column paddingInline={6} gap={1}>
@@ -161,7 +161,6 @@ export const BridgeInputGroup = ({
           customTokenListGenerator={customTokenListGenerator}
           isTokenListLoading={isTokenListLoading}
           isMultiselectEnabled={isMultiselectEnabled}
-          autoFocus={false}
         >
           {(onClickHandler, networkImageSrc) =>
             isAmountReadOnly && !token ? (