Pressing space 2 times "." appears in the Input (double-tapping Double-space feature)

[gedu]

Description

On iOS, I'm encountering an issue with the TextInput component in React Native. When using the "value" prop and typing two consecutive spaces, a dot is not being automatically added. However, if I remove the "value" prop, the double-space feature works as expected. Additionally, it works correctly when I keep (or remove) the "value" prop and set the "multiline" prop to "true".

I have attempted to investigate the source code to understand where the space is replaced by the dot, but I couldn't locate the specific implementation. Furthermore, I'm unsure about the differences between the MultilineInput and SinglelineInput components and whether UITextField and UITextView behave differently internally.

I would appreciate guidance on where to look in the source code or clarification on whether this behavior is intentional and not a bug.

Here is where the conversation started: Expensify/App#17153

Also found that this was reported some time ago: #22078

On web it works

React Native Version

0.71.0

Output of npx react-native info

System:
OS: macOS 12.6.5
CPU: (10) arm64 Apple M1 Pro
Memory: 96.69 MB / 16.00 GB
Shell: 5.8.1 - /bin/zsh
Binaries:
Node: 16.15.1 - ~/.nvm/versions/node/v16.15.1/bin/node
Yarn: 1.22.19 - ~/.nvm/versions/node/v16.14.0/bin/yarn
npm: 8.11.0 - ~/.nvm/versions/node/v16.15.1/bin/npm
Watchman: 2023.04.03.00 - /opt/homebrew/bin/watchman
Managers:
CocoaPods: 1.12.1 - /Users/eduardograciano/.rbenv/shims/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.9619390
Xcode: 14.2/14C18 - /usr/bin/xcodebuild
Languages:
Java: 11.0.18 - /usr/bin/javac
npmPackages:
@expensify/react-native: 0.71.2-alpha.3
@react-native-community/cli: Not Found
react: 18.2.0 => 18.2.0
react-native: Not Found
react-native-macos: Not Found
npmGlobalPackages:
react-native: Not Found

Steps to reproduce

1. Create a new react-native project
2. Run the app in an iOS Simulator
3. Place a TextInput component
4. Set the value prop

const [text, setText] = useState('');

return <TextInput
            onChangeText={setText}
            value={text}
          />

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

https://snack.expo.dev/@educallstackdev/bug-double-space-textinput

[github-actions]

⚠️

Newer Version of React Native is Available!

ℹ️

You are on a supported minor version, but it looks like there's a newer patch available - 0.71.8. 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.

[NickGerleman]

In an uncontrolled component (no value) text replacement is done by the system. In a controlled component, JS sends the value to native, which is used to set the set. First step would be debugging the flow of text changes flowing from JS to native for the controlled component.

[gedu]

Yes, I'm looking at the native side.

Looking at some methods and trying to get when the "." replaces one of the spaces (when no value prop) and why the "." isn't being replaced when no value prop.

Over this method nothing happens

textField:shouldChangeCharactersInRange:replaceString

but in this method the string already has the "."

textViewDidChange

I'm thinking there is something different in between.

like:

without value prop

textField:shouldChangeCharactersInRange:replaceString -> textViewDidChange (has dot)

with value prop

textField:shouldChangeCharactersInRange:replaceString -> something prevents addition ->textViewDidChange (no dot)

Still looking into

[gedu]

@NickGerleman Update:

I found that (void)updateState:(State::Shared const &)state oldState:(State::Shared const &)oldState

Gets called many times when the value prop is set, the second time the strings are the same (check the new state vs the old state) but it does some updates anyway, and setting again breaks the system logic to add the ., because it doesn't fulfill the step of tapping 2 times the space (or others).

So adding a flag so the updateState doesn't get executed a second time, which is the behavior of not setting the value prop, it works.

Do you think it makes sense and should I do a draft PR?

---

Not working

double_space_not_working.mp4

Fix Working

double_space_fix_v1.mp4

[gedu]

Fix working with dynamic styling

double_space_styling_v1.mp4

[gedu]

Fix is working with @@ shortcut

double_space_shortcut_v1.mp4

[NickGerleman]

If you think you have a solution I would recommend starting with a draft PR so someone on the team can take a look, with the context around of the functions, lines, etc you are mentioning 🙂.

[github-actions]

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]

This issue was closed because it has been stalled for 7 days with no activity.

[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 prepare a patched release with the fix.

Thanks a lot

[gedu]

@fabriziobertoglio1987 Hey, yes it is still an issue, and I created a PR with some integration tests: #39385

[gedu]

@fabOnReact Can you help on the review of the PR? #39385

[joshsmith]

This is still an issue.