🐞 iOS: Dictation Mic doesn't work properly with TextInput multiline

[imransilvake]

Description

I tried using Dictation mic on iOS with TextInput. It works fine when multiline is OFF. But it doesn't work if multiline is set to true. It paste the text to the input but as soon as I start to type, it removed the dictation text.

React Native Version

0.71.8

Output of npx react-native info

System:
    OS: macOS 13.4
    CPU: (8) x64 Intel(R) Core(TM) i7-8569U CPU @ 2.80GHz
    Memory: 1.13 GB / 16.00 GB
    Shell: 5.9 - /bin/zsh
  Binaries:
    Node: 18.16.0 - /usr/local/opt/node@18/bin/node
    Yarn: 1.22.19 - /usr/local/bin/yarn
    npm: 9.5.1 - /usr/local/opt/node@18/bin/npm
    Watchman: 2023.05.15.00 - /usr/local/bin/watchman
  Managers:
    CocoaPods: 1.12.1 - /usr/local/bin/pod
  SDKs:
    iOS SDK:
      Platforms: DriverKit 22.4, iOS 16.4, macOS 13.3, tvOS 16.4, watchOS 9.4
    Android SDK: Not Found
  IDEs:
    Android Studio: Not Found
    Xcode: 14.3.1/14E300c - /usr/bin/xcodebuild
  Languages:
    Java: Not Found
  npmPackages:
    @react-native-community/cli: Not Found
    react: 18.2.0 => 18.2.0 
    react-native: 0.71.8 => 0.71.8 
    react-native-macos: Not Found
  npmGlobalPackages:
    *react-native*: Not Found

Steps to reproduce

Use the following Input and play with the dictation mic.

const [message, setMessage] = useState('');
<TextInput onChangeText={setMessage} value={message} multiline={true} />

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

Minimal reproduction case is to just use TextInput with multiline set to True

<TextInput onChangeText={setMessage} value={message} multiline={true} />

[github-actions[bot]]

:warning:

Newer Version of React Native is Available!

:information_source:

You are on a supported minor version, but it looks like there's a newer patch available - 0.71.11. Please upgrade to the highest patch for your minor or latest and verify if the issue persists (alternatively, create a new project and repro the issue in it). If it does not repro, please let us know so we can close out this issue. This helps us ensure we are looking at issues that still exist in the most recent releases.

[imransilvake]

upgraded to 0.71.11 but that didn't solved the issue.

[rodrigoeidelvein]

Same issue happening here, we suspect that it's due to this change: https://github.com/facebook/react-native/commit/a804c0f22b4b11b3d9632dc59a6da14f6c4325e3

[hyochan]

https://github.com/facebook/react-native/assets/27461460/5e339158-8ab2-48ce-8faa-246f57ccb499

Our client reported this issue with above recording. This only happens in real device with multiline.

[hyochan]

Same issue happening here, we suspect that it's due to this change: a804c0f

I can confirm that reverting this removes the problem!

[sonorousduck]

Same issue happening here, we suspect that it's due to this change: a804c0f

I can confirm that reverting this removes the problem!

Seeing this issue on 0.71.11. Which version of React Native did you revert to in order to avoid this problem?

[write2lloyd]

This issue seems related to https://github.com/facebook/react-native/pull/37958

I can confirm that the issue is fixed in 0.72.3

[github-actions[bot]]

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.

[fabOnReact]

Do you still experience this issue?

I have four years of experience maintaining facebook/react-native and I specialize in the Text and TextInput components. I currently have 58 facebook/react-native PRs.

If you still experience this issue, I will make sure to prepare a patched release with the fix.

Thanks a lot

[deepnothing]

i am still having this issue - RN 0.71.8

[Manouli]

This is still an issue with RN 0.73.5

[burya4ok]

I'm still have this issue on iOS with inline dictation. And it does not work only with multiline TextField @fabOnReact

[react-native-bot]

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.