fix: Prevent recipient input to show multiline for selected address

[OGPoyraz]

Description

This PR aims to fix recipient input to show multiline for selected address in send flow

Changelog

CHANGELOG entry: Fix recipient to be shown multi-line in send flow

Related issues

Fixes: #22207

Manual testing steps

Feature: my feature name

  Scenario: user [verb for user action]
    Given [describe expected initial app state]

    When user [verb for user action]
    Then [describe expected outcome]

Screenshots/Recordings

Before

After

Pre-merge author checklist

• I’ve followed MetaMask Contributor Docs and MetaMask Mobile Coding Standards.
• 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 format if applicable
• I’ve applied the right labels on the PR (see labeling guidelines). 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.

---

Note

Replaces direct TextField props with a custom Input element to force single-line recipient addresses and prevent multiline behavior.

• Confirmations › RecipientInput (app/components/Views/confirmations/components/recipient-input/recipient-input.tsx)
  • Use TextField inputElement with foundation/Input to control behavior.
    • Configure single-line input: multiline={false}, numberOfLines={1}, scrollEnabled={false}, textAlignVertical="center", textBreakStrategy="simple".
    • Move input props (value, change handlers, autocorrect/spellcheck/autocomplete/capitalize, placeholder, autofocus, testID) onto Input.
    • Apply INPUT_STYLE_OVERRIDE to remove height/lineHeight and pad adjustments; disable state styles; set textVariant via TOKEN_TEXTFIELD_INPUT_TEXT_VARIANT.
  • Keep start/end accessories (To label, Clear/Paste buttons) unchanged.

^{Written by Cursor Bugbot for commit e06f20c. This will update automatically on new commits. Configure here.}

[jpuri]

I think we should avoid useMemo for jsx fragments like this, We should rather prefer to create a separate small component. Or put it ininline.

[OGPoyraz]

Thanks @jpuri, fair comment - I forgot to remove that while trying to understand issue - making this inline.

[cursor]

Bug: Focus Management Fails for Custom Input.

The custom Input element doesn't receive onBlur and onFocus handlers that TextField uses internally to manage its isFocused state. When inputElement is provided, TextField bypasses its internal handlers, breaking focus-dependent styling and preventing any parent onBlur/onFocus callbacks from being invoked. The custom Input needs explicit onBlur and onFocus props to maintain proper focus state management.

 

[cursor]

Bug: Custom Input Breaks TextField Focus Management

The custom Input element passed via inputElement bypasses TextField's internal focus/blur handlers and ref management. This breaks the TextField's focus state tracking (affecting visual styling), prevents the parent component's onBlur/onFocus callbacks from firing, and disables the ability to focus the input by pressing anywhere on the TextField container. The custom Input needs onBlur and onFocus handlers that call TextField's internal handlers, or these handlers need to be passed through somehow.

 

[sonarqubecloud]

Quality Gate passed

Issues
0 New issues
0 Accepted issues

Measures
0 Security Hotspots
100.0% Coverage on New Code
0.0% Duplication on New Code

See analysis details on SonarQube Cloud