iOS dictation is adding OBJ to string value

[gkasireddy202]

Description

Hi,

When I use dictation adding text to TextInput in iOS.
OBJ is added to the text input value.
I am using iOS 16.
Please find the attached screenshot.

Thanks,

React Native Version

0.71.4

Output of npx react-native info

System:
OS: macOS 13.2.1
CPU: (12) x64 Intel(R) Core(TM) i7-8750H CPU @ 2.20GHz
Memory: 118.30 MB / 16.00 GB
Shell: 5.8.1 - /bin/zsh
Binaries:
Node: 19.8.1 - /usr/local/bin/node
Yarn: Not Found
npm: 9.5.1 - /usr/local/bin/npm
Watchman: 2023.03.13.00 - /usr/local/bin/watchman
Managers:
CocoaPods: 1.12.0 - /Users/gopi/.rvm/gems/ruby-2.7.6/bin/pod
SDKs:
iOS SDK:
Platforms: DriverKit 22.2, iOS 16.2, macOS 13.1, tvOS 16.1, watchOS 9.1
Android SDK:
API Levels: 23, 24, 25, 26, 27, 28, 29, 30, 31, 32, 33
Build Tools: 28.0.3, 29.0.2, 30.0.2, 30.0.3, 31.0.0, 32.0.0, 32.1.0, 33.0.0
System Images: android-30 | Google APIs Intel x86 Atom, android-32 | Google APIs Intel x86 Atom_64, android-32 | Google Play Intel x86 Atom_64, android-33 | Google APIs Intel x86 Atom_64, android-33 | Google Play Intel x86 Atom_64
Android NDK: Not Found
IDEs:
Android Studio: 2021.2 AI-212.5712.43.2112.8609683
Xcode: 14.2/14C18 - /usr/bin/xcodebuild
Languages:
Java: 11.0.15 - /usr/bin/javac
npmPackages:
@react-native-community/cli: Not Found
react: 18.2.0 => 18.2.0
react-native: 0.71.4 => 0.71.4
react-native-macos: Not Found
npmGlobalPackages:
react-native: Not Found

Steps to reproduce

1. Click on dictation and start speaking.
2. After the ending of the sentence.

A unique character OBJ is added to the text input value.

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

import React, { Component } from 'react';
import { StyleSheet, View, Text, TouchableOpacity, TextInput } from 'react-native';
export default class App extends Component {

constructor(props) {
super(props);
this.state = {

  internalValue: ''


}

}

render() {
return (<View style={{ flex: 1 }}>

  <View style={{ flex: 1 }}>

  </View>

  <View style={{ flex: 2 }}>
    <View style={{ flex: 8 }}>
      <TextInput
        style={styles.textarea}
        onChangeText={(text) => this.setState({ internalValue: text })}
        value={this.state.internalValue}
        maxLength={120}
        multiline={true}
        placeholder={'Enter Text'}
        placeholderTextColor={'#c7c7c7'}
        underlineColorAndroid={'transparent'}
      />

    </View>
    <TouchableOpacity onPress={() => this.handleClickMe()} style={{ flex: 2, backgroundColor: 'green', margin: 20, alignItems: 'center', justifyContent: 'center' }}>

      <Text>Click me</Text>


    </TouchableOpacity>
  </View>
  <View style={{ flex: 3 }}>

  </View>




</View>)

}

}

const styles = StyleSheet.create({
container: {
flex: 1,
padding: 30,
justifyContent: 'center',
alignItems: 'center',
},
textareaContainer: {
height: 180,
padding: 5,
backgroundColor: '#F5FCFF',
},
textarea: {
textAlignVertical: 'top', // hack android
height: 170,
fontSize: 14,
color: '#333',
backgroundColor: 'white'
},
});

[chrisbobbe]

#22139 may be related:

In iOS, when the text dictation ends, onKeyPress event is called for unknown reason.

• The onKeyPress event return Backspace key which interfere with our text input logic.
• The event with that key doesn't actually delete a letter.

Please consider removing it, thank you~!

Reading discussion at that issue, it looks like the React Native team confirmed it as a real issue in 2019 but decided to stop tracking it in the issue tracker.

I think a good first debugging step would be to check and see if onKeyPress is being called at the end of a dictation input. And if so, with what character.

[gkasireddy202]

#22139 having any solutions. Please provide a solution.

[gkasireddy202]

please provide a solution.
This is an odd issue faced by many users.

[zhurylo]

onPress has nothing to do with this.

The "OBJ" character bug OR duplicate text bug only appears on iOS 16+ only and is due to "continuous dictation" introduced in iOS 16, - @Facebook/react-native/issues/36045

This issue has open peer review on React Native - @Facebook/react-native/pull/37188

Also, you can verify this by logging text.codePointAt(...) within the onChange method, which returns the value 65532, corresponding to the U+FFFC character.

The solution, for now, is to remove that char from the input:

handleOnChangeText = (text: string) => {
  const { onChangeText } = this.props;

  if (onChangeText) { 
     onChangeText(isIos ? text.replace(/\uFFFC/g, '') : text); 
  }
}

<TextInput>
   ...
   onChangeText={this.handleOnChangeText} 
   ...
</TextInput>

[hellohublot]

Maybe it's because of the iOS saves \UFFFC to the back-end, so I assume the OBJ in your screenshot comes from other platforms such as Android platform, because on iOS platform this \UFFFC will actually be displayed as an dictation recognizing indicator

If you are using iOS native app, It will also have this \uFFFC, but when the dictation recognition ends, or you click other buttons, such as the send message button, the system will forcibly end the dictation, and this \UFFFC will also be removed by the system and will not be sent to the server

So I think #37188 may be able to solve your problem, because it can make the behavior consistent with iOS native

[gkasireddy202]

@zhurylo - I replaced the OBJ value with an empty string using your example. Any other solution?

[SiobhyB]

Noting that this is also an issue in the WordPress mobile app, which we've worked around via the following code:

https://github.com/WordPress/gutenberg/blob/7cd7a0f53efc0af629ac211e10bd689fcc124e23/packages/react-native-aztec/ios/RNTAztecView/RCTAztecView.swift#L768-L771

Following this issue so we can remove the hack when this is resolved.

[stharvey]

I'm encountering this exact same problem. My current workaround involves eliminating the problematic character when the data is received on the server side. I accomplish this using the PHP function below. The second replacement operation includes the "[OBJ]" character, which might not be visible if you're viewing this on an iOS/MacOS device.

function removeUfffc($text) {
  $text = str_replace("\ufffc", "", $text);
  $text = str_replace("", "", $text);

  return $text;
}

[gkasireddy202]

@stharvey - Thanks for the reply. I worked on this example. The below one is working fine.
@zhurylo - suggested the below example.

handleOnChangeText = (text: string) => {
const { onChangeText } = this.props;

if (onChangeText) {
onChangeText(isIos ? text.replace(/\uFFFC/g, '') : text);
}
}

... onChangeText={this.handleOnChangeText} ...