microsoft / microsoft/react-native-windows

Cannot Mask <TextInput> to Pattern Without Flickering

Open
#9,613 12 comments 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

Area: TextInput enhancement Workstream: Component Parity
Dominant language
C++
Stars
17.3k
Forks
1.2k
Avg merge
1d 13h
Merged PRs (30d)
33

Description

Problem Description

Using setNativeProps({text: 'xxx'}) on a TextInput the text is not updated.

Steps To Reproduce

Create following element:

<TextInput ref={ele => this.Element = ele} defaultValue={null} onChangeText={(e) => {
this.Element.setNativeProps({text: null});
}}>

Expected Results

Element should null out the field after each change.

CLI version

npx react-native --version

Environment

OS: Windows 10 10.0.22000
CPU: (16) x64 Intel(R) Core(TM) i9-9980HK CPU @ 2.40GHz
Memory: 21.85 GB / 31.73 GB
Binaries:
Node: 16.13.0 - C:\Program Files\nodejs\node.EXE
Yarn: 1.22.17 - ~\AppData\Roaming\npm\yarn.CMD
npm: 8.1.3 - C:\Program Files\nodejs\npm.CMD
Watchman: Not Found
SDKs:
Android SDK: Not Found
Windows SDK:
AllowDevelopmentWithoutDevLicense: Enabled
AllowAllTrustedApps: Enabled
Versions: 10.0.18362.0, 10.0.19041.0, 10.0.22000.0
IDEs:
Android Studio: Not Found
Visual Studio: 17.0.31912.275 (Visual Studio Community 2022)
Languages:
Java: Not Found
npmPackages:
@react-native-community/cli: Not Found
react: 17.0.2 => 17.0.2
react-native: 0.66.0 => 0.66.0
react-native-windows: 0.66.5 => 0.66.5
npmGlobalPackages:
react-native: Not Found

npx react-native info
Target Platform Version

No response

Target Device(s)

No response

Visual Studio Version

No response

Build Configuration

No response

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

No response

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Research direction

The issue provides a TextInput reproduction using setNativeProps and onChangeText; start by running it on the reported React Native Windows 0.66 setup and compare the observed value with the expected nulling behavior. Done means the field is cleared after each change without flickering.

Written by the indexing model from the issue text.

Assessment

Tech stack
react-native
Domain
desktop, frontend
Issue type
Bug
Difficulty
4/5
Estimated time
3-5 days
Activity status
Stale
Clarity
Needs clarification
Newbie friendliness
30/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.