Description

TextField components with multiline={false} can inadvertently wrap text to multiple lines instead of scrolling horizontally for long text. This creates an inconsistent user experience where single-line inputs display text across multiple lines.

Root Cause

The lineHeight property in the TextField Input styles (20px on iOS, 22px on Android), when combined with the overall input height, allows text to wrap to multiple lines even when the component is configured as single-line.

Expected Behavior

When a TextField has multiline={false}:

• Long text should scroll horizontally within the input field
• Text should NOT wrap to multiple lines

Current Behavior

When a TextField has multiline={false}:

• Long text wraps to multiple lines
• Creates confusion for users expecting single-line input behavior

Reproduction Steps

Feature: TextField single-line input behavior

  Scenario: user enters long text in a single-line TextField
    Given the app is open with a TextField component where multiline={false}
    
    When user enters a long text string that exceeds the visible width
    Then the text currently wraps to multiple lines (incorrect)
    But should scroll horizontally instead (expected)

Proposed Solution

Remove the lineHeight property from TextField Input styles to ensure single-line inputs behave as expected.

Related

• Slack discussion: https://consensys.slack.com/archives/C02U025CVU4/p1768489381842089?thread_ts=1768489381.842089&cid=C02U025CVU4
• Fix PR: fix: remove lineHeight from TextField Input to prevent multi-line text wrapping #24584