Skip to content

Commit 0578c24

Browse files
fix: prevent search field going out of bounds when keyboard shown (#25393)
<!-- 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** <!-- 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? --> This PR fixes a bug where in the Swaps recipient account picker, if the user clicked on the search input bar, the keyboard would push the search input off screen. ## **Changelog** <!-- If this PR is not End-User-Facing and should not show up in the CHANGELOG, you can choose to either: 1. Write `CHANGELOG entry: null` 2. Label with `no-changelog` If this PR is End-User-Facing, please write a short User-Facing description in the past tense like: `CHANGELOG entry: Added a new tab for users to see their NFTs` `CHANGELOG entry: Fixed a bug that was causing some NFTs to flicker` (This helps the Release Engineer do their job more quickly and accurately) --> CHANGELOG entry: Fixed a bug where in the Swaps recipient account picker, if the user clicked on the search input bar, the keyboard would push the search input off screen. ## **Related issues** Fixes: https://consensyssoftware.atlassian.net/browse/SWAPS-3860 ## **Manual testing steps** ```gherkin Feature: Swaps recipient account search fix Scenario: user trying to bridge Given user is searching for a recipient account in Swaps When user clicks on the search bar Then the search bar remains on screen ``` ## **Screenshots/Recordings** <!-- If applicable, add screenshots and/or recordings to visualize the before and after of your change. --> ### **Before** <!-- [screenshots/recordings] --> ### **After** <!-- [screenshots/recordings] --> https://github.com/user-attachments/assets/46e7aeb8-cc69-4d01-ba07-cb9498802031 ## **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 - [ ] I've included tests if applicable - [ ] 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. <!-- CURSOR_SUMMARY --> --- > [!NOTE] > **Low Risk** > Low risk UI behavior change limited to the recipient selector bottom sheet’s keyboard handling; no changes to quoting, routing, or address selection logic. > > **Overview** > Prevents the Bridge/Swaps recipient selector search field from being pushed off-screen when the keyboard appears by making `BottomSheet`’s `keyboardAvoidingViewEnabled` stateful and letting `MultichainAccountSelectorList` toggle it based on list size. > > Also sets the list’s `keyboardDismissMode` to `on-drag` to improve keyboard dismissal while scrolling. > > <sup>Written by [Cursor Bugbot](https://cursor.com/dashboard?tab=bugbot) for commit a9293d0. This will update automatically on new commits. Configure [here](https://cursor.com/dashboard?tab=bugbot).</sup> <!-- /CURSOR_SUMMARY -->
1 parent 34d62b1 commit 0578c24

1 file changed

Lines changed: 9 additions & 2 deletions

File tree

app/components/UI/Bridge/components/RecipientSelectorModal/RecipientSelectorModal.tsx

Lines changed: 9 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import React, { useCallback, useMemo, useEffect } from 'react';
1+
import React, { useCallback, useMemo, useEffect, useState } from 'react';
22
import { useNavigation } from '@react-navigation/native';
33
import Routes from '../../../../../constants/navigation/Routes';
44
import BottomSheet from '../../../../../component-library/components/BottomSheets/BottomSheet';
@@ -27,6 +27,8 @@ import Engine from '../../../../../core/Engine';
2727
const RecipientSelectorModal: React.FC = () => {
2828
const navigation = useNavigation();
2929
const dispatch = useDispatch();
30+
const [keyboardAvoidingViewEnabled, setKeyboardAvoidingViewEnabled] =
31+
useState(true);
3032

3133
const internalAccountsById = useSelector(selectInternalAccountsById);
3234
const accountToGroupMap = useSelector(selectAccountToGroupMap);
@@ -149,7 +151,10 @@ const RecipientSelectorModal: React.FC = () => {
149151
}, [destAddress, internalAccountsById]);
150152

151153
return (
152-
<BottomSheet onClose={handleClose} keyboardAvoidingViewEnabled>
154+
<BottomSheet
155+
onClose={handleClose}
156+
keyboardAvoidingViewEnabled={keyboardAvoidingViewEnabled}
157+
>
153158
<BottomSheetHeader onClose={handleClose}>
154159
Recipient account
155160
</BottomSheetHeader>
@@ -165,6 +170,8 @@ const RecipientSelectorModal: React.FC = () => {
165170
showExternalAccountOnEmptySearch
166171
onSelectExternalAccount={handleSelectExternalAccount}
167172
selectedExternalAddress={selectedExternalAddress}
173+
setKeyboardAvoidingViewEnabled={setKeyboardAvoidingViewEnabled}
174+
keyboardDismissMode="on-drag"
168175
/>
169176
</BottomSheet>
170177
);

0 commit comments

Comments
 (0)