Hacktoberfest 2026: le issue che i maintainer hanno segnato per ottobre, aperte e adatte ai principianti. Sfoglia le issue Hacktoberfest

TextInput with no explicit backgroundColor paints the OS system window color (white strip on dark themes) — TxGetSysColor COLOR_WINDOW falls through to tomAutoColor

Aperta
  • Qualcosa non va?
#16,305 0 commenti 0 reazioni 0 assegnatari Vedi su GitHub

I maintainer di solito rispondono entro 2 giorni

Nessuno ha ancora preso questa issue.

Valutazione

Difficoltà
4/5
Tempo stimato
3-5 giorni
Idoneità per principianti
48/100
Tipo di issue
Bug
Chiarezza
Abbastanza chiara
Stato di attività
Tranquilla
Stack tecnologico
cpp, react-native
Ambito
desktop-dev, frontend

Direzione di ricerca

Inizia in vnext/Microsoft.ReactNative/Fabric/Composition/TextInput/WindowsTextInputComponentView.cpp, in ITextHost::TxGetSysColor, quindi confronta la gestione di COLOR_WINDOW e COLOR_WINDOWTEXT con il comportamento dello sfondo di DrawText. Determina se il valore predefinito debba usare una risorsa del tema dell’app oppure lasciare il rendering a composition, e considera il problema risolto quando un TextInput senza stili non mostra più il colore della finestra del sistema operativo, mentre gli sfondi espliciti continuano a funzionare.

Scritto dal modello di indicizzazione a partire dal testo della issue.

Descrizione

Needs: Triage :mag:
Problem Description

A <TextInput> with no explicit backgroundColor paints the OS system window color (white under default OS settings) behind its text. In a dark-themed app, every unstyled TextInput shows a white strip. The background tracks the OS light/dark setting, not the app's theme, and ignores the RN default of a transparent/unpainted background.

Root cause — confirmed in 0.83.2 source. In vnext/Microsoft.ReactNative/Fabric/Composition/TextInput/WindowsTextInputComponentView.cpp, the ITextHost::TxGetSysColor implementation (line ~334 in the 0.83.2 npm package) initializes cr = (COLORREF)tomAutoColor and, in the COLOR_WINDOW case (~348–351), returns the explicit backgroundColor when set but otherwise falls through to tomAutoColor:

COLORREF TxGetSysColor(int nIndex) override {
  COLORREF cr = (COLORREF)tomAutoColor;
  switch (nIndex) {
    ...
    case COLOR_WINDOW:
      if (m_outer->viewProps()->backgroundColor)
        return (*m_outer->viewProps()->backgroundColor).AsColorRefNoAlpha();
      break;   // <-- falls through to tomAutoColor

RichEdit resolves tomAutoColor for COLOR_WINDOW to the real system window color (white unless the OS is in dark mode). Meanwhile the composition DrawText() path clears to transparent and only fills when backgroundColor is "meaningful" — so the RichEdit-painted system color is what leaks through to the screen.

Candidate fix — we're happy to PR this, pending one piece of guidance. In the COLOR_WINDOW case, when no explicit backgroundColor is set, return a theme-derived background instead of falling through to tomAutoColor, so the input tracks the app's light/dark theme. The adjacent COLOR_WINDOWTEXT case already goes through m_outer->theme()->Color(...) for foreground, so the plumbing exists — what we could not confidently determine from outside the codebase is which theme resource key is the intended default TextInput background (or whether the preferred fix is to make RichEdit paint nothing and let the composition layer own the background entirely). We didn't want to guess at an API in a PR; if a maintainer can point at the preferred accessor/approach, we'll submit the fix.

Steps To Reproduce
  1. New-architecture RNW 0.83.2 app with dark-styled UI (most visible when the OS itself is in light mode).
  2. Render <TextInput style={{ height: 44, color: 'white' }} /> — note: no backgroundColor.
  3. Observe: the input paints an opaque white (system window color) strip behind the text.
  4. Control: set any explicit backgroundColor (a dark color) — the strip follows the explicit color, confirming the fall-through is the unstyled path only.
Expected Results

An unstyled TextInput should not paint an opaque OS system color. Expected parity with iOS/Android: transparent (container background shows through) — or at minimum a background derived from the app theme rather than the OS-wide system window color.

CLI version

18.0.0

Environment
System:
  OS: Windows 11 10.0.26200 (ARM64 device; app builds and runs ARM64)
  CPU: (6) x64 Apple Silicon (Windows-on-ARM)
  Memory: 6.49 GB / 15.99 GB
Binaries:
  Node: 22.15.0
  Yarn: 4.5.1
  npm: 10.9.2
SDKs:
  Windows SDK versions: 10.0.19041.0, 10.0.22621.0, 10.0.26100.0
IDEs:
  Visual Studio: 18.6.11822.322 (Community 2026), 17.14.37314.3 (Community 2022)
npmPackages (yarn 4 workspaces — `cli info` reports Not Found in-workspace):
  react-native: 0.83.2
  react-native-windows: 0.83.2 (New Architecture / Fabric composition)
  Microsoft.WindowsAppSDK: 1.8
Community Modules

Not relevant — reproduces with the core TextInput (deep import react-native/Libraries/Components/TextInput/TextInput, no wrapper components).

Target React Native Architecture

New Architecture (WinAppSDK) Only

Target Platform Version

10.0.22621

Visual Studio Version

Visual Studio 2026

Build Configuration

Debug

Snack, code example, screenshot, or link to a repository
// Dark screen, unstyled input -> white strip
<View style={{ flex: 1, backgroundColor: '#1e1e1e', padding: 24 }}>
  <TextInput style={{ height: 44, color: 'white', borderWidth: 1, borderColor: '#555' }} />
</View>

Context: found during a Windows hardening pass of a production RNW app (Facilitron FIT — RNW 0.83.2 new-arch, Windows 11 ARM64, WinAppSDK 1.8, daily-driven at 250% display scale). Our production workaround is to force an explicit backgroundColor on every TextInput via the design system. Sibling TextInput/ScrollView fixes from the same investigation: #16302, #16303, #16304.

Lingua principale
C++
Stelle
17.4k
Fork
1.2k
Merge medio
2g 17h
PR unite (30g)
13

Preparare l'ambiente

Come iniziare

  1. Leggi tutta la issue e poi la guida ai contributi del progetto.
  2. Commenta sulla issue per dire che te ne occupi tu — evita che due persone facciano lo stesso lavoro.
  3. Fai un fork del repository e lavora su un branch.
  4. Apri una pull request che faccia riferimento al numero della issue.

Altre issue di microsoft/react-native-windows

Tutte le issue di microsoft/react-native-windows

Issue simili

Altre issue su C++

Ricevi le nuove issue nella tua casella

Un breve riepilogo di issue GitHub adatte ai principianti.