TextInput backgroundColor ignored for hover & focused states

[RobMeyer]

Environment

1. react-native -v:
   react-native-cli: 2.0.1 react-native: 0.60.0-microsoft.16
2. npm ls rnpm-plugin-windows:

react-native-windows-repo@0.0.1 c:\repos\react-native-windows
`-- rnpm-plugin-windows@0.3.8  extraneous

npm ERR! extraneous: rnpm-plugin-windows@0.3.8 c:\repos\react-native-windows\node_modules\rnpm-plugin-windows

3. npm ls react-native-windows:

`-- (empty)

4. node -v: v10.15.3
5. npm -v: 6.4.1
6. yarn --version: 1.16.0

Then, specify:

• Target Platform Version(s): 17763 "RS5"

• Target Device(s): Desktop,

• Visual Studio Version: 2019

• Build Configuration: Debug

Steps to Reproduce

(Write your steps here:)

1. Render

<TextInput
          style={{backgroundColor: 'black', borderColor: 'gray', color: 'white'}}
          placeholderTextColor="yellow"
          placeholder="backgroundColor: 'black', borderColor: 'gray', color: 'white', placeholderTextColor: 'yellow'"
        />

2. Place focus within text block

Expected Behavior

When control is at rest without focus, colors set via style prop are respected.

Upon receiving mouse-hover or focus, the color styles specified should remain the same. The developer/API expectation for an RN app is to handle interaction state colors by re-rendering with a different backgroundColor in response to js events such as onMouseEnter/onMouseLeave, onFocus/onBlur, etc., if changing colors is desirable. In addition to backgroundColor, this also applies to borderColor.

Furthermore, there are several colors being inherited from the "accent color" set in the Windows OS color settings. The default selectionColor and several colors pertaining to the X button (appears on the right edge of TextBox whenever text is non-empty and not-multiline-enabled) all default to the OS accent color. For reference, in screenshots below, my OS accent color is Turf green.

Actual Behavior

Upon receiving mouse hover or keyboard focus, the backgroundColor prop is ignored; the , backed by a XAML renders with a white background. The default impl uses a VSM that uses a number of brushes from Resources. The Background DependencyProperty is used instead of Resources.TextControlForeground when set, but Resources.TextControlForegroundPointerOver, Resources.TextControlForegroundFocused, and Resources.TextControlForegroundDisabled are used for other interaction states regardless of whether Background is set.

If Windows OS color theme is set to light mode:

If Windows OS color theme is set to dark mode:

Additional note: Setting FrameworkElement.RequestedTheme = ElementTheme.Dark also doesn't resolve the issue.

Reproducible Demo

(Paste the link to an example project and exact instructions to reproduce the issue.)

Demo available upon request.

Additional context

(Write any other additional context that may help in root causing the issue.)

This issue has been discussed in several other issues:
#3545
#698
#1949

XAML's inconsistent use of styling colors via DependencyProperties sometimes, and "lightweight styling" Resource brushes other times is the primary issue here. PropertyUtils.h TryUpdateBackgroundBrush, TryUpdateForeground, and TryUpdateBorderProperties could be updated to also set respective well-known resource brushes for some types of controls (TextBox, PasswordBox, etc.). Additionally, there's a similar class of issues with ToggleSwitch and Checkbox, and likely others. I'd like to create some reusable infrastructure so ViewManager implementations can easily set all the relevant resource brushes.

[RobMeyer]

I have a local fix for this. Currently cleaning up the code before publishing a PR

[chrisglein]

@RobMeyer is this fixed? You submitted and merged a PR.

[RobMeyer]

@chrisglein yup, will close!