`secureTextEntry` when it is set to `<TextInput secureTextEntry={true} />` causes the TextInput to not render

[dzunisanindlhovu]

Environment

If you are using latest version:

1. react-native -v:
   react-native-cli: 2.0.1
   react-native: 0.61.5

2. react-native run-windows --info:

Otherwise if --info doesn't exist:

1. react-native -v:
   react-native-cli: 2.0.1
   react-native: 0.61.5

2. npm ls rnpm-plugin-windows:
   -- (empty)

3. npm ls react-native-windows:
   react-native-windows@0.61.0-beta.44

4. node -v:
   v12.10.0

5. npm -v:
   6.10.3

6. yarn --version:
   1.22.0

Then, specify:

10.0,18362.0

• Target Platform Version(s):
  x64

• Target Device(s):
  Windows 10 PC

• Visual Studio Version:
  Visual Studio 2019

• Build Configuration: Debug

Steps to Reproduce

(Write your steps here:)

1. Get a clean version a new React Native Windows App environment.

2. The only code you need is below.
   <TextInput secureTextEntry={false} />
<TextInput secureTextEntry={true} />

3. You will notice that the first one renders but the second one doesn't render.

Expected Behavior

(Write what you thought would happen.)
I expected this <TextInput secureTextEntry={true} /> to give me a TextInput for a password.

Actual Behavior

(Write what happened. Add screenshots!)
This didn't render anything <TextInput secureTextEntry={true} />

react-native run-windows --logging

Reproducible Demo

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

Additional context

(Write any other additional context that may help in root causing the issue.)
Basically, this issue stems from C++/WinRT using 2 seperate UI elements for handling password and text i.e. winrt::Windows::UI::Xaml::Controls::PasswordBox and winrt::Windows::UI::Xaml::Controls::TextBox , whereas react native only uses <TextInput secureTextEntry={true/false} /> . The TextInputViewManager.cpp in ReactUWP attempts to swap out the PasswordBox and the TextBox depending on what the value of secureTextEntry is. This is where the TextInput fails to render in React Native.

The ReparentView just leads to the ShadowNodeBase.cpp where it tries to swap out the PasswordBox with the TextBox

The only way I could ever get the PasswordBox to render was to comment out this line and replace it with the winrt::PasswordBox like as you can see in the screenshot below. I also had to fix a few exceptions.

[namrog84]

Note: Bug filed for Xbox partner team.

[kmelmon]

I'll take this bug.

The problem manifests as Height coming out to 0. Width comes out to the correct width.

Note that when secureTextEntry = false, Height comes out to an expected value.

So the issue seems to be caused by yoga layout not being able to come up with a decent default height when no height is specified. The app should not have to specify a height so this is a bug. Debugging now...

[dzunisanindlhovu]

Hi @kmelmon thanks for grabbing this. I have since discovered a workaround for this issue that may help you resolve the bug.

<TextInput style={{height: 40, alignSelf:'stretch'}} secureTextEntry={true} />

Basically adding those 2 properties in the style enables the PasswordBox to render and be clearly visible. I don't know about the innerworking of the style but it seems like it causes the PasswordBox to be rerendered properly. Let me know if this helps.

[kmelmon]

Bug understood. When we re-parent the new control, we forgot to inform the UIManager which maintains a mapping from shadow node => backing XAML element. This mapping not being updated caused us to not measure the new XAML element, and then after layout completes, we end up pushing the wrong values back into the backing XAML element.

Fix is straightforward. Will have this checked in soon.

[kmelmon]

@chrisglein I marked the PR as "Fixes 4371", but the issue is still open. Isn't the bot supposed to auto-close?

Closing manually...