Skip to content

TextInput regression between Paper and Fabric: Manual set value clearTextOnSubmit-style behavior not working. #15168

@chrisglein

Description

@chrisglein

Problem Description

I don't know why this stopped working, but I had something like this:

function ChatEntry({
  submit,
}: ChatEntryProps): JSX.Element {
  const styles = React.useContext(StylesContext);

  const [value, setValue] = React.useState('');

  const submitValue = () => {
    // If the user hits submit but the text is empty, don't carry that forward
    if (value !== '') {
      submit(value);
      // Reset to a blank prompt
      setValue('');
    }
  };

  return (
    <View style={styles.horizontalContainer}>
      <TextInput
        accessibilityLabel="Prompt input"
        multiline={true}
        placeholder="Ask me anything"
        onChangeText={newValue => setValue(newValue)}
        submitKeyEvents={[{code: 'Enter', shiftKey: false}]}
        onSubmitEditing={submitValue}
        value={value}
      />
    </View>
  );
}

And on Paper that was fine. On Fabric, it hits the submit() invocation (as in submitKeyEvents works just fine, great)... but the setValue('') doesn't seem to work (the value is not cleared). I'm not sur why.

Now there's a way to do this through direct policy by adding clearTextOnSubmit={true} and removing the manual clear. But I'm opening this bug in case something insidious has crept in with regards to the Paper/Fabric behavior difference.

Steps To Reproduce

See above.

Expected Results

Value is cleared on TextInput during submit method.

CLI version

19.1.1

Environment

System:
  OS: Windows 11 10.0.27944
  CPU: "(24) x64 AMD Ryzen Threadripper PRO 3945WX 12-Cores     "
  Memory: 36.79 GB / 63.86 GB
Binaries:
  Node:
    version: 18.18.0
    path: C:\Program Files\nodejs\node.EXE
  Yarn:
    version: 1.22.19
    path: C:\Program Files (x86)\Yarn\bin\yarn.CMD
  npm:
    version: 9.8.1
    path: C:\Program Files\nodejs\npm.CMD
  Watchman: Not Found
SDKs:
  Android SDK: Not Found
  Windows SDK:
    AllowDevelopmentWithoutDevLicense: Enabled
    AllowAllTrustedApps: Enabled
    Versions:
      - 10.0.19041.0
      - 10.0.22621.0
      - 10.0.26100.0
IDEs:
  Android Studio: Not Found
  Visual Studio:
    - 17.14.36408.4 (Visual Studio Community 2022)
Languages:
  Java: Not Found
  Ruby: Not Found
npmPackages:
  "@react-native-community/cli":
    installed: 19.1.1
    wanted: 19.1.1
  react:
    installed: 19.1.0
    wanted: 19.1.0
  react-native:
    installed: 0.80.2
    wanted: 0.80.2
  react-native-windows:
    installed: 0.80.0-preview.6
    wanted: 0.80.0-preview.6
npmGlobalPackages:
  "*react-native*": Not Found
Android:
  hermesEnabled: true
  newArchEnabled: true
iOS:
  hermesEnabled: Not found
  newArchEnabled: Not found

Community Modules

N/A

Target React Native Architecture

New Architecture (WinAppSDK) Only

Target Platform Version

None

Visual Studio Version

None

Build Configuration

None

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

No response

Metadata

Metadata

Labels

Area: FabricSupport Facebook FabricArea: TextInputNew ArchitectureBroad category for issues that apply to the RN "new" architecture of Turbo Modules + FabricParity: Fabric vs. PaperRNW Fabric does not look or behave like RNW Paperbug

Type

Projects

No projects

Relationships

None yet

Development

No branches or pull requests

Issue actions