Text Input Styling is not behaving as expected

Tatious commented 5 years ago

Environment

react-native-cli: 2.0.1 react-native: 0.60.6 -- (empty) -- react-native-windows@0.60.0-vnext.45 node: v10.16.3 npm: 6.9.0 yarn: 1.19.1

SDK Version(s): 10.0.18362.0
Target Device(s): Desktop
Visual Studio Version: Visual Studio 2017
Build Configuration: Debug

Steps to Reproduce

When I create a TextInput with the following styling, I get incorrect behavior compared to that of iOS or Android. In the following comparisons, I will be comparing specifically the behavior of Android to that of Windows.

<TextInput
    style={{
        height: 80,
        paddingHorizontal: 20,
        color: '#FFFFFF',
        borderRadius: 4,
        backgroundColor: '#404040',
        borderColor: '#FF0000',
        borderWidth: 2
    }}
    maxLength={50}
    disableFullscreenUI
    value={inputText}
/>

Here, we create a text input with red border, white text, grey background, and rounded edges. When not selected, one would expect the styling to produce this output: (As seen on Android)

However, instead we get this result:

Notice that the border radius is ignored and the text is not centered by default. I found that setting the top padding is the only way to center this text, which is incorrect behavior.

When selected, we would expect the styling to look like this:

However, instead we get this result:

Notice that in addition to inconsistencies mentioned before, when open, the background turns white and the input text color turns black.

Expected Behavior

Text input behaves similarly to that on iOS and Android

Actual Behavior

Text input does not behave similarly for reason outlined above

Additional context

Adam Gorman(adamgor) Austin Beaulieu(aubeauli)

chrisglein commented 4 years ago

A lot of different issues in one issue here, so we need to parse through it a bit.

The rounded corners issue is something that was an issue in XAML and was fixed by WinUI2.2. If we take on WinUI (which is the plan #3521 ) that should get fixed.
The text not getting centered is again I believe a problem with the native control. XAML's TextBox has fixed margin and isn't set up to center its layout very well. We may have to change the template for the native control to get it behaving in a way similar to the other platforms. Which may be reasonable, but raises questions about how to balance the native control versus cross-platform consistency.
For the selected state is the underline part of your expectation? That threw me as being part of the selected state
The white background on select is going to match the default for the native control. Maybe we're hitting the classic XAML issue where we've set the background but left the VSM (VisualStateMachine) in place so only the idle state is customized? That would explain this. Mapping the backgroundColor in the style to TextBox.Background is insufficient.

chrisglein commented 4 years ago

The white background is actionable, as we can assign to the VSM states instead of just the Background. We can at least track that issue here. This may need to be split out into other issues depending on answers to the above.

chrisglein commented 4 years ago

The main actionable issue was fixed (see #3649). Reactivate (or open new issues) if any of the details need to be separately tracked.

microsoft / react-native-windows