Skip to content

Commit

Permalink
fix: focused search field forces scroll (#29676)
Browse files Browse the repository at this point in the history
<!--
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.
  • Loading branch information
micaelae authored Jan 15, 2025
1 parent deb67c4 commit 31915a6
Showing 1 changed file with 5 additions and 6 deletions.
11 changes: 5 additions & 6 deletions ui/pages/bridge/prepare/bridge-input-group.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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}>
Expand Down Expand Up @@ -161,7 +161,6 @@ export const BridgeInputGroup = ({
customTokenListGenerator={customTokenListGenerator}
isTokenListLoading={isTokenListLoading}
isMultiselectEnabled={isMultiselectEnabled}
autoFocus={false}
>
{(onClickHandler, networkImageSrc) =>
isAmountReadOnly && !token ? (
Expand Down

0 comments on commit 31915a6

Please sign in to comment.