TextInput style, multiline, and caret bugs (new arch)

[austinhallock]

Problem Description

Hey folks! Wanted to report a couple TextInput bugs that I haven't been able to find a workaround for. These are issues I didn't see when looking through open issues for TextInput

• If text extends past the end of the input, we can't access the text (it doesn't "scroll" to the overflowed text). It also increases the height of the input even though multiline is not set (and does not wrap)
• Multiline calculates the number of lines incorrectly with varying characters, which becomes more noticeable when the text is long.
  • Properties like letterSpacing seem to be accounted for in determining number of lines, but doesn't show visually
  • ^^ Same for other font families - it seems to realize it's a different font family when trying to calculate number of lines/height, but visually it does not show the passed-in font
  • If a defaultValue (and I think value too) is set, that seems to be taken into account for multiline wrapping, but if it's removed it seems to treat it like that text still exists (2nd video)
• Double clicking doesn't select text
• The caret doesn't show for white inputs when Windows setting is on dark mode

I think all the multiline issues are a result of it rendering different styles than it's using to calculate the wrap. Calculating the wrap seems to successfully use the fonts that are passed in, but visually it's not showing those styles.

Attached is a video showing each of these

screen-capture.10.webm

This one is for the defaultValue bug

screen-capture.11.webm

This is on a fresh RNW new arch build using 0.78.0-preview.3 (but I think this issue predates that too).

Some other misc bugs - will update as I run into them:

• Can paste rich text, including line breaks in a non-multiline input
• Ctrl+A -> Ctrl+C -> Ctrl+V seems to copy the content with a line break and paste with line break, breaking input

Steps To Reproduce

1. npx --yes @react-native-community/cli@next init TestApp --version "latest"
2. cd TestApp
3. yarn add react-native-windows@^0.78.0-preview.3
4. yarn react-native init-windows --template cpp-app --overwrite
5. npx react-native run-windows
6. Add a to App.tsx

import React from 'react';
import {
  View,
  TextInput,
  Text,
} from 'react-native';

function App(): React.JSX.Element {
  return (
    <View>
      <View style={{ padding: 20 }}>
        <View style={{ marginBottom: 8 }}><Text>Cursor missing when Windows Dark Mode + white input</Text></View>
        <TextInput
          style={{ width: 300, borderWidth: 1, borderColor: '#00ffff' }}
        />
      </View>
      <View style={{ padding: 20 }}>
        <View style={{ marginBottom: 8 }}><Text>Cursor does successfully show when dark mode + black input</Text></View>
        <TextInput
          style={{ width: 300, backgroundColor: '#000', color: '#fff', borderWidth: 1, borderColor: '#0000ff' }}
        />
      </View>
      <View style={{ padding: 20 }}>
        <View style={{ marginBottom: 8 }}><Text>If text extends past the end of the input, we can't access the text and cursor stays stuck to right. It also increases the height of the input for nothing (multiline is not set).</Text></View>
        <TextInput
          style={{ width: 300, backgroundColor: '#000', color: '#fff', borderWidth: 1, borderColor: '#0000ff' }}
        />
      </View>
      <View style={{ padding: 20 }}>
        <View style={{ marginBottom: 8 }}><Text>When default value is set and removed, multiline still treats it like it's there.</Text></View>
        <TextInput
          style={{ width: 300, backgroundColor: '#000', color: '#fff', borderWidth: 1, borderColor: '#0000ff' }}
          defaultValue="Some default text that will eat up space."
        />
      </View
      <View style={{ padding: 20 }}>
        <View style={{ marginBottom: 8 }}><Text>This has letterSpacing 10 - visually doesn't show, but seems to affect multiline height.</Text></View>
        <TextInput
          style={{ width: 300, backgroundColor: '#000', color: '#fff', borderWidth: 1, borderColor: '#0000ff', letterSpacing: 10 }}
          multiline={true}
        />
      </View>
    <View style={{ padding: 20 }}>
      <View style={{ marginBottom: 8 }}><Text>Other font families don't seem to visually show the difference. Eg. this should be Times New Roman.</Text></View>
      <TextInput
        style={{ width: 300, backgroundColor: '#000', color: '#fff', borderWidth: 1, borderColor: '#0000ff', fontFamily: 'Times New Roman' }}
          multiline={true}
        />
      </View>
      <View style={{ padding: 20 }}>
        <View style={{ marginBottom: 8 }}><Text>Double clicking doesn't select text.</Text></View>
        <TextInput
          style={{ width: 300, backgroundColor: '#000', color: '#fff', borderWidth: 1, borderColor: '#0000ff' }}
        />
      </View>
    </View>
  );
}

export default App;

Expected Results

No response

CLI version

npx @react-native-community/cli -v

Environment

npx @react-native-community/cli info

Community Modules

No response

Target Platform Version

None

Target Device(s)

No response

Visual Studio Version

None

Build Configuration

None

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

No response

[austinhallock]

I have a workaround for this for now, in case anyone else runs into this. I'm wrapping the TextInput in a ScrollView, updating the width of the TextInput based on what's in it (hidden Text element with same font styles, and an onLayout), and scrolling the ScrollView from TextInput onSelectionChange

[chrisglein]

Thanks for trying out the new architecture!

@TatianaKapos take a crack at a deeper dive on existing issues and as appropriate turn this into a set of discrete issues we can dig into.

[austinhallock]

I've mentioned it before, but the new architecture is incredible. Performance is so much better, and it's flexible enough that I've been able to solve most issues I run into (UWP was pretty limiting before).

Keep up the great work :)