gedu
commented
1 year ago @0xmiroslav
Proposal
Please restate the problem we are addressing in this issue:
The issue is that on iOS native apps, the double-tapping feature, which should add a dot when tapping the space key twice, is not working as expected.
Identifying the root cause of the problem:
The “TextInput” component on the iOS side is managed by the RCTSinglelineTextInputView module ( multiline=false ). When the value prop is not used, the component behaves as an uncontrolled component, where the system handles the text updates. However, when the value prop is used, the component becomes a controlled component, relying on the provided value to update the text. This controlled component setup involves increased communication between the JS and Native sides.
To ensure the native state remains synchronized, there is a method called updateState that handles updating the native event after a text change. However, in the case of a controlled component, the additional back-and-forth interaction between JavaScript and Native can cause the “updateState” method to be executed multiple times. During these multiple updates, the text may be replaced, even with the same text content. This discrepancy in the number of state updates disrupts the expected behavior of the double-tapping feature, which relies on the detection of consecutive spaces.
Proposed changes to resolve the problem:
To resolve this issue, I propose adding a flag named _stateUpdated to control the execution of the “updateState” method. By setting this flag to ensure that “updateState” is executed only once, this will align the behavior with that of an uncontrolled component. The flag will be cleared after any new text change in the textField:(_unused UITextField *)textField shouldChangeCharactersInRange:(NSRange)range replacementString:(NSString *)string method. Since this method is always executed before “updateState” and not affected by the back-and-forth sync between JS and Native realms, it provides a reliable point to control the state updates.
This mean a fix at react-native framework
Exploration of alternative solutions (optional):
During the investigation, I explored a couple of alternative solutions to address the issue:
- Using the
multilineprop: This approach involves utilizing a different component that is always uncontrolled and handled by the system. However, adopting this solution may introduce challenges in making the input behave as a single-line component, potentially conflicting with the desired functionality. - Not using the
valueprop (yes usingonChange): By not using thevalueprop, we can revert the component to an uncontrolled state, allowing the system to handle all text changes. However, this would require accessing the text through a ref or storing it in the component’s state. While this approach may resolve the issue, it may result in the loss of text formatting features.
0xmiros
chiragsalian
Christinadobrzyn
melvin-bot[bot]
tjferriss
harshad2711
If you haven’t already, check out our contributing guidelines for onboarding and email contributors@expensify.com to request to join our Slack channel!
Action Performed:
Expected Result:
if "." shortcut is enabled, the shortcut should work when tapping the space 2 times
Actual Result:
if "." shorcut is enabled, the shortcut doesn't work when tapping the space 2 times
Workaround:
unknown
Platforms:
Which of our officially supported platforms is this issue occurring on?
Version Number: 1.2.96-4 Reproducible in staging?: y Reproducible in production?: y If this was caught during regression testing, add the test name, ID and link from TestRail: Email or phone of affected tester (no customers): Logs: https://stackoverflow.com/c/expensify/questions/4856 Notes/Photos/Videos: Any additional supporting documentation
https://user-images.githubusercontent.com/43996225/230680037-97e38841-3890-4671-a905-6757633be3f0.mp4
https://user-images.githubusercontent.com/43996225/230680041-a8b718bc-2575-43d1-9d83-dc2662c3094a.mp4
https://user-images.githubusercontent.com/43996225/230680087-d94f2354-2a45-498a-9705-f9f691ea13e3.MP4
Expensify/Expensify Issue URL: Issue reported by: @harshad2711 Slack conversation: https://expensify.slack.com/archives/C049HHMV9SM/p1680851400066889
View all open jobs on GitHub
Upwork Automation - Do Not Edit