Skip to content

Fabric TextInput doesn't apply background color #11763

@chrisglein

Description

@chrisglein

Problem Description

In Paper, we applied a background color by default because that was included with XAML's TextBox. In Fabric, we don't. Which could be worked around by allowing style.backgroundColor to apply... but it doesn't do anything.

Steps To Reproduce

      <View style={{backgroundColor: 'orange'}}>
        <TextInput
          style={{backgroundColor: 'white', margin: 10}}
          placeholder="useless placeholder"
          keyboardType="numeric"
          value="1234"/>
      </View>

Put focus in the textbox and typed '1234'

Windows

image

Expected Results

https://snack.expo.dev/k-XPDTTsr

Android

image

iOS

image

Web

image

CLI version

12.0.0-alpha.3

Environment

info Fetching system and libraries information...
System:
  OS: Windows 10 10.0.25880
  CPU: (8) x64 Intel(R) Core(TM) i7-9700K CPU @ 3.60GHz
  Memory: 43.87 GB / 63.85 GB
Binaries:
  Node:
    version: 18.15.0
    path: C:\Program Files\nodejs\node.EXE
  Yarn:
    version: 1.22.19
    path: C:\Program Files (x86)\Yarn\bin\yarn.CMD
  npm:
    version: 9.5.0
    path: C:\Program Files\nodejs\npm.CMD
  Watchman: Not Found
SDKs:
  Android SDK: Not Found
  Windows SDK:
    AllowDevelopmentWithoutDevLicense: Enabled
    AllowAllTrustedApps: Enabled
    Versions:
      - 10.0.19041.0
      - 10.0.22000.0
      - 10.0.22621.0
IDEs:
  Android Studio: Not Found
  Visual Studio:
    - 17.5.33530.505 (Visual Studio Community 2022)
Languages:
  Java: Not Found
  Ruby: Not Found
npmPackages:
  "@react-native-community/cli": Not Found
  react:
    installed: 18.2.0
    wanted: 18.2.0
  react-native:
    installed: 0.73.0-nightly-20230601-d9b3339ef
    wanted: 0.73.0-nightly-20230601-d9b3339ef
  react-native-windows:
    installed: 0.0.0-canary.665
    wanted: 0.0.0-canary.665
npmGlobalPackages:
  "*react-native*": Not Found
Android:
  hermesEnabled: true
  newArchEnabled: false
iOS:
  hermesEnabled: Not found
  newArchEnabled: Not found

Target Platform Version

10.0.19041

Target Device(s)

No response

Visual Studio Version

Visual Studio 2022

Build Configuration

Debug

Snack, code example, screenshot, or link to a repository

No response

Metadata

Metadata

Assignees

Labels

Area: FabricSupport Facebook FabricArea: TextInputNew ArchitectureBroad category for issues that apply to the RN "new" architecture of Turbo Modules + Fabricbug

Type

No type

Projects

Status

Done

Milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions