Repository navigation
Controlled TextInput duplicates dictated text in iOS 16 #36045
Description
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
onChangeTextcallback is called, the incomingtextcontains the duplication
- by the time an
- 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
Reacted by Mogen Cheng, Chris Heninger, Almir Filho and Arnaud
Activity
mog3n commentedon Mar 11, 2023
A lot of our users use dictation and this is also happening with our controlled textinput as well.
fabOnReact commentedon May 1, 2023
I can not reproduce it on iOS 16.4.
2023-05-01.17-02-03.mp4
jpdriver commentedon May 1, 2023
@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 commentedon May 4, 2023
Expensify/App#17174 (comment)
jpdriver commentedon May 4, 2023
would be fixed with #37188
there is existing logic to change string comparison when using dictation -- however
self.backedTextInputView.textInputMode.primaryLanguageis no longer reported as"dictation"when using iOS 16 and the keyboard remains visible.Letty commentedon Aug 17, 2023
Is there a reason why the PR is not part of the releases? I see the changes on
mainbut none of the released versions have the file changes and the bug is still reproduceable.jpdriver commentedon Aug 17, 2023
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 commentedon Aug 17, 2023
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 commentedon Sep 18, 2023
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 commentedon Dec 12, 2023
In my tests, this only happens when the
multilineprop isfalse.jgillick commentedon Dec 12, 2023
How is
valuebeing set?ehabhosam commentedon Dec 13, 2023
"value" is the state of the input text. You're checking if the difference between the new text's length is a lot longer than the current state, then it's mostly caused by the bug. Actually it's not a solution and it sometimes (not a lot) fails but it was quite good for me.
jgillick commentedon Dec 13, 2023
It looks like React Native 0.73 fixes this issue. I just did a cursory check on my end. Can anyone else confirm this?
github-actions commentedon Jun 11, 2024
This issue is stale because it has been open 180 days with no activity. Remove stale label or comment or this will be closed in 7 days.
github-actions commentedon Jun 18, 2024
This issue was closed because it has been stalled for 7 days with no activity.
svdgoor commentedon Dec 1, 2025
Still happens. This issue should be reopened.