Repository navigation
Pressing space 2 times "." appears in the Input (double-tapping Double-space feature) #37437
Description
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
- Create a new react-native project
- Run the app in an iOS Simulator
- Place a TextInput component
- 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
Activity
github-actions commentedon May 15, 2023
NickGerleman commentedon May 16, 2023
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 commentedon May 16, 2023
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
but in this method the string already has the "."
I'm thinking there is something different in between.
like:
without
valueproptextField:shouldChangeCharactersInRange:replaceString->textViewDidChange(has dot)with
valueproptextField:shouldChangeCharactersInRange:replaceString-> something prevents addition ->textViewDidChange(no dot)Still looking into
gedu commentedon May 17, 2023
@NickGerleman Update:
I found that
(void)updateState:(State::Shared const &)state oldState:(State::Shared const &)oldStateGets called many times when the
valueprop 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
updateStatedoesn't get executed a second time, which is the behavior of not setting thevalueprop, 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 commentedon May 19, 2023
Fix working with dynamic styling
double_space_styling_v1.mp4
gedu commentedon May 19, 2023
Fix is working with
@@shortcutdouble_space_shortcut_v1.mp4
NickGerleman commentedon May 19, 2023
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 commentedon Nov 16, 2023
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 Nov 23, 2023
This issue was closed because it has been stalled for 7 days with no activity.
fabOnReact commentedon Jan 17, 2024
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 commentedon Jan 17, 2024
@fabriziobertoglio1987 Hey, yes it is still an issue, and I created a PR with some integration tests: #39385
gedu commentedon Jan 22, 2024
@fabOnReact Can you help on the review of the PR? #39385
joshsmith commentedon Feb 1, 2024
This is still an issue.