Fabric TextInput generates double key presses (0.0.0-canary.637)

[chrisglein]

Problem Description

Typing into a TextInput in a Fabric RNW app produces doubles of all characters. Backspace still works single, so you can type by doing letter1->backspace->letter2->backspace->... 😅

Steps To Reproduce

1. Clone https://github.com/chiaramooney/sample-fabric/
2. Add a TextInput
3. Type "asdf"
4. Get "aassddff"

Expected Results

Just one each time, thanks

CLI version

11.0.0-alpha.2

Environment

info Fetching system and libraries information...
System:
  OS: Windows 10 10.0.25336
  CPU: (8) x64 Intel(R) Core(TM) i7-8650U CPU @ 1.90GHz
  Memory: 1.92 GB / 15.92 GB
Binaries:
  Node:
    version: 16.17.0
    path: C:\Program Files\nodejs\node.EXE
  Yarn:
    version: 1.22.19
    path: C:\Program Files (x86)\Yarn\bin\yarn.CMD
  npm:
    version: 8.15.0
    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.22000.0
      - 10.0.22621.0
IDEs:
  Android Studio: Not Found
  Visual Studio:
    - 17.5.33516.290 (Visual Studio Community 2022)
    - 16.11.33423.256 (Visual Studio Community 2019)
Languages:
  Java: Not Found
  Ruby: Not Found
npmPackages:
  "@react-native-community/cli": Not Found
  react:
    installed: 18.2.0
    wanted: 18.2.0
  react-native:
    installed: 0.0.0-20230321-2153-7b86e3aae
    wanted: 0.0.0-20230321-2153-7b86e3aae
  react-native-windows:
    installed: 0.0.0-canary.637
    wanted: 0.0.0-canary.637
npmGlobalPackages:
  "*react-native*": Not Found
Android:
  hermesEnabled: Not found
  newArchEnabled: Not found
iOS:
  hermesEnabled: Not found
  newArchEnabled: Not found

Target Platform Version

None

Target Device(s)

Desktop

Visual Studio Version

Visual Studio 2022

Build Configuration

None

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

Setting a breakpoint in WindowsTextInputComponentView::sendMessage and slowly typing "asdf":

15:15:41:024	sendMessage msg=0x00000100 wParam=0x0000000000000041
15:15:41:227	sendMessage msg=0x00000102 wParam=0x0000000000000061
15:15:41:227	sendMessage msg=0x00000102 wParam=0x0000000000000061
15:15:41:227	sendMessage msg=0x00000101 wParam=0x0000000000000041
15:15:45:480	sendMessage msg=0x00000100 wParam=0x0000000000000053
15:15:45:480	sendMessage msg=0x00000102 wParam=0x0000000000000073
15:15:45:727	sendMessage msg=0x00000102 wParam=0x0000000000000073
15:15:45:727	sendMessage msg=0x00000101 wParam=0x0000000000000053
15:15:48:326	sendMessage msg=0x00000100 wParam=0x0000000000000044
15:15:48:326	sendMessage msg=0x00000102 wParam=0x0000000000000064
15:15:48:519	sendMessage msg=0x00000102 wParam=0x0000000000000064
15:15:48:519	sendMessage msg=0x00000101 wParam=0x0000000000000044
15:15:50:495	sendMessage msg=0x00000100 wParam=0x0000000000000046
15:15:50:495	sendMessage msg=0x00000102 wParam=0x0000000000000066
15:15:50:726	sendMessage msg=0x00000102 wParam=0x0000000000000066
15:15:50:726	sendMessage msg=0x00000101 wParam=0x0000000000000046

That's WM_KEYDOWN, WM_CHAR, WM_CHAR, WM_KEYUP for each one.

[chrisglein]

@acoates-ms tried this in a standalone app, not in playground. Haven't checked if it repros there. If I'm setting a breakpoint in a reasonable place, the double WM_CHARs seem suspect.

[chrisglein]

Think I found the culprit:

Microsoft.ReactNative\Fabric\Composition\CompositionEventHandler.cpp

    case WM_CHAR:
    case WM_SYSCHAR: {
      // TODO full bubbling of events
      if (auto focusedComponent = RootComponentView().GetFocusedComponent()) {
        auto result = focusedComponent->sendMessage(msg, wParam, lParam);
        if (result)
          return result;
      }
    }
    case WM_KEYDOWN:
    case WM_KEYUP:
    case WM_SYSKEYDOWN:
    case WM_SYSKEYUP: {
      // TODO full bubbling of events
      if (auto focusedComponent = RootComponentView().GetFocusedComponent()) {
        auto result = focusedComponent->sendMessage(msg, wParam, lParam);
        if (result)
          return result;
      }

There's a switch fallthrough happening there from WM_CHAR to the WM_KEYDOWN block, causing an unintended duplicate call to sendMessage.

If this is intended, it should be marked with fallthrough.

Do we not have warnings enabled to catch this?