Controlled TextInput duplicates dictated text in iOS 16

[jpdriver]

Description

• When trying to use dictation with a controlled <TextInput /> in iOS 16, entered text is duplicated
• This issue does not affect iOS 15
• This issue does not affect uncontrolled <TextInput />s
• Text seems to be being duplicated within native code
  • by the time an onChangeText callback is called, the incoming text contains the duplication
• Originally noticed on RN 0.68.2 but confirmed it is still happening with latest (0.71.2 at time of writing)

Version

0.71.2

Output of npx react-native info

info Fetching system and libraries information...
System:
 OS: macOS 13.2
 CPU: (10) arm64 Apple M1 Max
 Memory: 992.61 MB / 32.00 GB
 Shell: 5.8.1 - /bin/zsh
 Binaries:
 Node: 19.1.0 - /opt/homebrew/bin/node
 Yarn: 1.22.19 - /opt/homebrew/bin/yarn
 npm: 8.19.3 - /opt/homebrew/bin/npm
 Watchman: 2022.11.14.00 - /opt/homebrew/bin/watchman
 Managers:
 CocoaPods: 1.11.3 - /opt/homebrew/bin/pod
 SDKs:
 iOS SDK:
 Platforms: DriverKit 22.2, iOS 16.2, macOS 13.1, tvOS 16.1, watchOS 9.1
 Android SDK: Not Found
 IDEs:
 Android Studio: 2022.1 AI-221.6008.13.2211.9477386
 Xcode: 14.2/14C18 - /usr/bin/xcodebuild
 Languages:
 Java: 11.0.17 - /usr/bin/javac
 npmPackages:
 @react-native-community/cli: Not Found
 react: 18.2.0 => 18.2.0 
 react-native: 0.71.2 => 0.71.2 
 react-native-macos: Not Found
 npmGlobalPackages:
 *react-native*: Not Found

Steps to reproduce

• tap a controlled <TextInput /> on iOS 16
• dictate something

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

Snack

https://snack.expo.dev/@jpmigueldriver/dictation-dictation

Screen Recordings

iOS 15

• demonstrates expected behaviour
• no difference between controlled vs. uncontrolled

RPReplay_Final1675365463.MP4

iOS 16

• uncontrolled input works as expected
• controlled input duplicates dictated text

RPReplay_Final1675365420.MP4

[mog3n]

A lot of our users use dictation and this is also happening with our controlled textinput as well.

[fabOnReact]

I can not reproduce it on iOS 16.4.

2023-05-01.17-02-03.mp4

[jpdriver]

@fabriziocucci I think it depends how the keyboard dictation behaves.

In both my original iOS 15 video and your iOS 16.4 video, the keys on the keyboard disappear. Whenever this happens, everything seems to work as expected.

But if you're using dictation where the keys remain visible then the issue seems to appear..??

I thought this was something introduced with iOS 16 -- but could it maybe be a regional thing..??

I also had one other thought -- can you try tapping the microphone in the bottom right to stop dictation, instead of the inline tooltip?

I guess there are multiple ways of stopping dictation and inserting the text 😅

[fabOnReact]

Expensify/App#17174 (comment)

[jpdriver]

would be fixed with #37188

there is existing logic to change string comparison when using dictation -- however self.backedTextInputView.textInputMode.primaryLanguage is no longer reported as "dictation" when using iOS 16 and the keyboard remains visible.

see https://github.com/facebook/react-native/pull/37188/files#diff-47e1ad911ac455bc7835356905ea0b6bf796d73af09734dc17a192f754eb5516L123

[Letty]

Is there a reason why the PR is not part of the releases? I see the changes on main but none of the released versions have the file changes and the bug is still reproduceable.

[jpdriver]

Only because a new release hasn't been cut since this commit (e8b4bb0) was merged.

It should be included in 0.73+

more info here: reactwg/react-native-releases#64

[Letty]

Thank you for pointing out the discussion! <3 Would have thought this is possibly a hotfix, since it is a crutial part over most apps.
I guess patching react-native would be the best for pre 0.73 versions.

[ehabhosam]

I'm working on a react native project where I have a feature that consumes the dictation and I faced the same issue on iOS only.

I found a very simple solution that overcomes this bug:

function handleTextChange(text) { if (text.length - value.length > 10) return; onChange(text); }

It's of course not the best solution, but it's good for now until I find a better one.

[jgillick]

I can not reproduce it on iOS 16.4.

2023-05-01.17-02-03.mp4

In my tests, this only happens when the multiline prop is false.