Add inputType textNoSuggestions in react-native to disable the autocomplete #35691

fabOnReact · 2022-12-20T19:48:27Z

Summary

Several users tested this solution (using visible-password, see comments in #35155).

Adding inputType textNoSuggestions in react-native to disable the autocomplete functionality.
https://stackoverflow.com/a/1992201/7295772

android:inputType="textNoSuggestions"

react-native/ReactAndroid/src/main/java/com/facebook/react/views/textinput/ReactEditText.java

Lines 1153 to 1168 in 76a1445

    
             /* 
        
              * This class is set as the KeyListener for the underlying TextView 
        
              * It does two things 
        
              *  1) Provides the same answer to getInputType() as the real KeyListener would have which allows 
        
              *     the proper keyboard to pop up on screen 
        
              *  2) Permits all keyboard input through 
        
              */ 
        
             private static class InternalKeyListener implements KeyListener { 
        
               private int mInputType = 0; 
        
               public InternalKeyListener() {} 
        
               public void setInputType(int inputType) { 
        
                 mInputType = inputType; 
        
               }

More info in #35590 (comment)

fixes #33139 fixes #35155 fixes #35590
Related #30263, #35350

Changelog

[ANDROID] [FIXED] - Fixes TextInput causing app to hang on Samsung devices with Android 13 with autocomplete/Grammarly enabled

Test Plan

2022-12-20.20-20-22.mp4

…mplete functionality (comment, comment-2, user-comment, user-comment-2) android:inputType=“textFilter|textNoSuggestions” P | type | task -- | -- | -- 1 | review | Review information from your previous investigation (comment) 1.2 | review | Review comments from Issues facebook#33139 (facebook#30263, facebook#35155, facebook#35590, facebook#35350) 2 | bug | Build RNTester on Android 13 and test TextInput example with Grammarly (example-without-scrollview, example-with-scrollview) 2.1 | task | Enter timemachine and restore previous android sdk configs in folder /Users/fabriziobertoglio/Library/Android/sdk 2.2 | task | Check sdk supported in build.gradle configs in react-native (commit) 2.3 | task | Read react-native environment setup instructions 2.4 | task | Follow instructions on discord to fix build error (1-2 hours) 3 | bug | Add inputType textNoSuggestions in react-native to disable the autocomplete functionality (comment, comment-2, user-comment, user-comment-2) android:inputType=“textFilter\|textNoSuggestions” 3.1 | task | Review implementation of InternalKeyListener 3.2 | task | Find configs inputMode in sourcecode (setKeyboardType) 3.3 | task | Add type “textFilter\|textNoSuggestions” to setKeyboardType 3.4 | task | Test that auto-corrections are disabled in a TextInput with Grammarly Keyboard 3.5 | task | Refactor functionality in branch 3.6 | task | Record test case P type task 1 review Review information from your previous investigation ([comment](facebook#35590 (comment))) 1.2 review Review comments from Issues [facebook#33139](facebook#33139) ([facebook#30263](facebook#30263), [facebook#35155](facebook#35155), [facebook#35590](facebook#35590), [facebook#35350](facebook#35350)) 2 bug Build RNTester on Android 13 and test TextInput example with Grammarly ([example-without-scrollview](facebook#35155), [example-with-scrollview](facebook#35590)) 2.1 task Enter timemachine and restore previous android sdk configs in folder /Users/fabriziobertoglio/Library/Android/sdk 2.2 task Check sdk supported in build.gradle configs in react-native ([commit](394486e)) 2.3 task Read react-native [environment setup instructions](https://reactnative.dev/docs/next/environment-setup) 2.4 task Follow [instructions on discord](https://discord.com/channels/514829729862516747/1050309907787808768/1050462841028743309) to fix build error (1-2 hours) 3 bug Add inputType textNoSuggestions in react-native to disable the autocomplete functionality ([comment](facebook#35155 (comment)), [comment-2](facebook#35590 (comment)), [user-comment](facebook#33139 (comment)), [user-comment-2](facebook#33139 (comment))) android:inputType=“textFilter|textNoSuggestions” 3.1 task Review implementation of [InternalKeyListener](https://github.com/facebook/react-native/blob/76a14454d7f1f2b2ba8f5a79c2f640fafb42de6d/ReactAndroid/src/main/java/com/facebook/react/views/textinput/ReactEditText.java#L1153-L1168) 3.2 task Find configs [inputMode](https://reactnative.dev/docs/next/textinput#inputmode) in sourcecode ([setKeyboardType](https://github.com/facebook/react-native/blob/9f78517d6401f3a7ece453825a059a13b73f6140/ReactAndroid/src/main/java/com/facebook/react/views/textinput/ReactTextInputManager.java#L849-L881)) 3.3 task Add type “textFilter|textNoSuggestions” to [setKeyboardType](https://github.com/facebook/react-native/blob/9f78517d6401f3a7ece453825a059a13b73f6140/ReactAndroid/src/main/java/com/facebook/react/views/textinput/ReactTextInputManager.java#L849-L881) 3.4 task Test that auto-corrections are disabled in a TextInput with Grammarly Keyboard 3.5 task Refactor functionality in branch 3.6 task Record test case

fabOnReact · 2022-12-20T19:48:51Z

P	type	task
1	review	Review information from your previous investigation (comment)
1.2	review	Review comments from Issues #33139 (#30263, #35155, #35590, #35350)
2	bug	Build RNTester on Android 13 and test TextInput example with Grammarly (example-without-scrollview, example-with-scrollview)
2.1	task	Enter timemachine and restore previous android sdk configs in folder /Users/fabriziobertoglio/Library/Android/sdk
2.2	task	Check sdk supported in build.gradle configs in react-native (commit)
2.3	task	Read react-native environment setup instructions
2.4	task	Follow instructions on discord to fix build error
3	bug	Add inputType textNoSuggestions in react-native to disable the autocomplete functionality (comment, comment-2, user-comment, user-comment-2) android:inputType=“textFilter\|textNoSuggestions”
3.1	task	Review implementation of InternalKeyListener
3.2	task	Find configs inputMode in sourcecode (setKeyboardType)
3.3	task	Add type “textFilter\|textNoSuggestions” to setKeyboardType
3.4	task	Test that auto-corrections are disabled in a TextInput with Grammarly Keyboard
3.5	task	Refactor functionality in branch
3.6	task	Record test case

P type task
1 review Review information from your previous investigation (comment)
1.2 review Review comments from Issues #33139 (#30263, #35155, #35590, #35350)
2 bug Build RNTester on Android 13 and test TextInput example with Grammarly (example-without-scrollview, example-with-scrollview)
2.1 task Enter timemachine and restore previous android sdk configs in folder /Users/fabriziobertoglio/Library/Android/sdk
2.2 task Check sdk supported in build.gradle configs in react-native (commit)
2.3 task Read react-native environment setup instructions
2.4 task Follow instructions on discord to fix build error (1-2 hours)
3 bug Add inputType textNoSuggestions in react-native to disable the autocomplete functionality (comment, comment-2, user-comment, user-comment-2) android:inputType=“textFilter|textNoSuggestions”
3.1 task Review implementation of InternalKeyListener
3.2 task Find configs inputMode in sourcecode (setKeyboardType)
3.3 task Add type “textFilter|textNoSuggestions” to setKeyboardType
3.4 task Test that auto-corrections are disabled in a TextInput with Grammarly Keyboard
3.5 task Refactor functionality in branch
3.6 task Record test case

fabOnReact · 2022-12-20T20:06:02Z

add support for multiline

analysis-bot · 2022-12-20T20:17:38Z

Platform	Engine	Arch	Size (bytes)	Diff
android	hermes	arm64-v8a	8,466,773	+51
android	hermes	armeabi-v7a	7,786,090	+117
android	hermes	x86	8,941,011	+348
android	hermes	x86_64	8,798,927	+303
android	jsc	arm64-v8a	9,652,836	+27
android	jsc	armeabi-v7a	8,386,032	+24
android	jsc	x86	9,716,217	+21
android	jsc	x86_64	10,193,945	+23

Base commit: 9f78517
Branch: main

analysis-bot · 2022-12-20T20:52:49Z

Platform	Engine	Arch	Size (bytes)	Diff
ios	-	universal	n/a	--

Base commit: 9f78517
Branch: main

pull-bot · 2022-12-20T21:03:06Z

PR build artifact for 6d47816 is ready.
To use, download tarball from "Artifacts" tab in this CircleCI job then run yarn add <path to tarball> in your React Native project.

pull-bot · 2022-12-20T21:05:16Z

PR build artifact for 6d47816 is ready.
To use, download tarball from "Artifacts" tab in this CircleCI job then run yarn add <path to tarball> in your React Native project.

NickGerleman · 2022-12-21T22:13:17Z

This seems like a pretty big stretch of the intent of keyboardType…

TextInput has separate props for things like “autoCorrect” already which set TYPE_TEXT_FLAG_AUTO_CORRECT, we shouldn’t conflate the type of input with wanting to disable suggestions.

NickGerleman · 2022-12-22T01:11:05Z

It looks like autoCorrect also sets TYPE_TEXT_FLAG_NO_SUGGESTIONS already. So the prop controls both flags. So really it seems like we want a prop like it with more granularity.

fabOnReact · 2022-12-22T08:29:17Z

Yes. You are right. autoCorrect already provides this functionality with support for multiline.

Related #35155 (comment) #35155 (comment)
The user adopted visible-password to fix the ANR, but visible-password does not support multiline. I was trying to implement a similar solution to support multiline and behave as close as possible to visible-password.

TextView removes or adds SuggestionSpan when the InputType changes. I believe the SuggestionSpans trigger the ANR on One UI5 when deleting text with backspace key (see the breakdown of the error here). It isa One UI5 issue.

I can not join One UI5 Beta with my Samsung device in Italy, and I believe it is One UI5 Issue with their Samsung Keyboard integration with Grammarly. More One UI5 updates are released these days (see comment) and for this reason, I thought of pausing the development of this functionality (more info about One UI5 Beta program in my comment here). Thanks for the feedback. 🙏

I believe issues #33139 #35155 #35590 #30263 should be reported to Samsung One UI5 Beta or UI4. I have attached the info below just for documentation.
https://developer.samsung.com/one-ui-beta

Reporting Errors
When you have enrolled in the One UI Beta Program, you can help improve the Galaxy software stability by reporting issues you encounter while using the beta software.
To provide feedback on bugs or errors in beta software, in the Samsung Members application, select "Beta feedback > Send feedback".
Note: To ensure relevant log information is included in the error report, submit the report within 3 minutes of encountering the bug or error, and do not terminate (swipe away) the Samsung Members application until you are notified that the report has been sent. This can take up to 5 minutes.

Task completed

P	type	task
1	test	Reproduce #35590 using Android Emulator API 13 and Grammarly keyboard
1.1	task	Search for a Samsung Emulator to reproduce the issue
1.2	task	Add example from snack to RNTester (#35590)
2	bug	Multiline does not work with keyboardType no-suggestions (InputType, stackoverflow). Method updateStagedInputTypeFlag will set a Flag and unset other flags, seems to be not compatible with keyboardType.
2.1	task	Test other values of prop keyboardType (for ex. numeric) with prop multiline and verify if they don’t work.
2.2	task	Find Android Keyboard type that supports multiline (stackoverflow)
2.3	task	Test Keyboard type in Android App (stackoverflow solution)
2.4	task	Test keyboard type in react-native

P type task
1 test Reproduce #35590 using Android Emulator API 13 and Grammarly keyboard
1.1 task Search for a Samsung Emulator to reproduce the issue
1.2 task Add example from snack to RNTester (#35590)
2 bug Multiline does not work with keyboardType no-suggestions (InputType, stackoverflow). Method updateStagedInputTypeFlag will set a Flag and unset other flags, seems to be not compatible with keyboardType.
2.1 task Test other values of prop keyboardType (for ex. numeric) with prop multiline and verify if they don’t work.
2.2 task Find Android Keyboard type that supports multiline (stackoverflow)
2.3 task Test Keyboard type in Android App (stackoverflow solution)
2.4 task Test keyboard type in react-native

Task planned (not completed)

P	type	task
3	bug	setRawInputType works on Android but not on ReactNative (stackoverflow).
3.1	current	Try to set multiline using setRawInputType and setInputType in react-native.Multiline prop works on react-native.
3.2	task	Use setRawInputType to set diffent type of keyboard (for ex. numeric) to verify that the method changes the keyboard.
3.3	task	Search more information about setRawInputType
3.4	task	Find alternative solution because setRawInputType does not work on react-native. Test the solution on Android first.
3.5	task	Read implementation of multiline and understand why it does not work with keyboardType prop.
4	bug	Verify issue https://github.com/facebook/react-native/issues/30263reproduces with Grammarly on a Samsung device

P type task
3 bug setRawInputType works on Android but not on ReactNative (stackoverflow).
3.1 current "Try to set multiline using setRawInputType and setInputType in react-native.
Multiline prop works on react-native."
3.2 task Use setRawInputType to set diffent type of keyboard (for ex. numeric) to verify that the method changes the keyboard.
3.3 task Search more information about setRawInputType
3.4 task Find alternative solution because setRawInputType does not work on react-native. Test the solution on Android first.
3.5 task Read implementation of multiline and understand why it does not work with keyboardType prop.
4 bug Verify issue #30263 reproduces with Grammarly on a Samsung device

rikur · 2022-12-27T09:32:36Z

Just wanted to say thank you for trying to fix this 🙏 We're receiving many 1 star reviews in the Play Store because a multi-line input on Samsung Androids is unusable.

chengweibo · 2023-12-21T06:34:02Z

android 13 Sumsung Galaxy A71 , Sumsung Galaxy A32, Sumsung Galaxy A53 phone the following crash occurs , hope to give me solution，thanks
Fatal Exception: java.lang.IndexOutOfBoundsException: offset(1) should be less than line limit(0)
at android.text.TextLine.measure(TextLine.java:389)
at android.text.Layout.getHorizontal(Layout.java:1254)
at android.text.Layout.getHorizontal(Layout.java:1230)
at android.text.Layout.getPrimaryHorizontal(Layout.java:1200)
at android.widget.TextView.bringPointIntoView(TextView.java:11046)
at android.widget.TextView.updateAfterEdit(TextView.java:11983)
at android.widget.Editor.finishBatchEdit(Editor.java:2086)
at android.widget.Editor.endBatchEdit(Editor.java:2068)
at android.widget.TextView.endBatchEdit(TextView.java:9931)
at android.widget.TextView.doKeyDown(TextView.java:9505)
at android.widget.TextView.onKeyDown(TextView.java:9275)
at android.view.KeyEvent.dispatch(KeyEvent.java:3508)
at android.view.View.dispatchKeyEvent(View.java:15395)
at android.view.ViewGroup.dispatchKeyEvent(ViewGroup.java:1978)
at android.view.ViewGroup.dispatchKeyEvent(ViewGroup.java:1978)
at android.view.ViewGroup.dispatchKeyEvent(ViewGroup.java:1978)
at android.view.ViewGroup.dispatchKeyEvent(ViewGroup.java:1978)
at android.view.ViewGroup.dispatchKeyEvent(ViewGroup.java:1978)
at android.widget.ScrollView.dispatchKeyEvent(ScrollView.java:738)
at android.view.ViewGroup.dispatchKeyEvent(ViewGroup.java:1978)
at android.view.ViewGroup.dispatchKeyEvent(ViewGroup.java:1978)
at com.facebook.react.ReactRootView.dispatchKeyEvent(ReactRootView.java:234)
at android.view.ViewGroup.dispatchKeyEvent(ViewGroup.java:1978)
at android.view.ViewGroup.dispatchKeyEvent(ViewGroup.java:1978)
at android.view.ViewGroup.dispatchKeyEvent(ViewGroup.java:1978)
at com.android.internal.policy.DecorView.superDispatchKeyEvent(DecorView.java:1100)
at com.android.internal.policy.PhoneWindow.superDispatchKeyEvent(PhoneWindow.java:1961)
at android.app.Activity.dispatchKeyEvent(Activity.java:4342)
at androidx.core.app.ComponentActivity.superDispatchKeyEvent(ComponentActivity.java:122)
at androidx.core.view.KeyEventDispatcher.dispatchKeyEvent(KeyEventDispatcher.java:84)
at androidx.core.app.ComponentActivity.dispatchKeyEvent(ComponentActivity.java:140)
at com.android.internal.policy.DecorView.dispatchKeyEvent(DecorView.java:924)
at android.view.ViewRootImpl$ViewPostImeInputStage.processKeyEvent(ViewRootImpl.java:8056)
at android.view.ViewRootImpl$ViewPostImeInputStage.onProcess(ViewRootImpl.java:7864)
at android.view.ViewRootImpl$InputStage.deliver(ViewRootImpl.java:7213)
at android.view.ViewRootImpl$InputStage.onDeliverToNext(ViewRootImpl.java:7270)
at android.view.ViewRootImpl$InputStage.forward(ViewRootImpl.java:7236)
at android.view.ViewRootImpl$AsyncInputStage.forward(ViewRootImpl.java:7434)
at android.view.ViewRootImpl$InputStage.apply(ViewRootImpl.java:7244)
at android.view.ViewRootImpl$AsyncInputStage.apply(ViewRootImpl.java:7491)
at android.view.ViewRootImpl$InputStage.deliver(ViewRootImpl.java:7217)
at android.view.ViewRootImpl$InputStage.onDeliverToNext(ViewRootImpl.java:7270)
at android.view.ViewRootImpl$InputStage.forward(ViewRootImpl.java:7236)
at android.view.ViewRootImpl$InputStage.apply(ViewRootImpl.java:7244)
at android.view.ViewRootImpl$InputStage.deliver(ViewRootImpl.java:7217)
at android.view.ViewRootImpl.deliverInputEvent(ViewRootImpl.java:10788)
at android.view.ViewRootImpl.doProcessInputEvents(ViewRootImpl.java:10676)
at android.view.ViewRootImpl.enqueueInputEvent(ViewRootImpl.java:10632)
at android.view.ViewRootImpl$ViewRootHandler.handleMessageImpl(ViewRootImpl.java:6822)
at android.view.ViewRootImpl$ViewRootHandler.handleMessage(ViewRootImpl.java:6697)
at android.os.Handler.dispatchMessage(Handler.java:106)
at android.os.Looper.loopOnce(Looper.java:226)
at android.os.Looper.loop(Looper.java:313)
at android.app.ActivityThread.main(ActivityThread.java:8757)
at java.lang.reflect.Method.invoke(Method.java)
at com.android.internal.os.RuntimeInit$MethodAndArgsCaller.run(RuntimeInit.java:571)
at com.android.internal.os.ZygoteInit.main(ZygoteInit.java:1067)

React Native Version
0.64.2

Samsung android 13

Output of npx react-native info
react native app

Steps to reproduce
react native app

Snack, screenshot, or link to a repository
react native app

facebook-github-bot added the CLA Signed This label is managed by the Facebook bot. Authors need to sign the CLA before a PR can be reviewed. label Dec 20, 2022

This was referenced Dec 22, 2022

TextInput crashes an app if Samsung Keyboard uses Predictive Text & Suggest text corrections #33139

Closed

TextInput hangs with Samsung keyboard's Grammarly integration #35590

Closed

fabOnReact closed this Jan 9, 2023

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Add inputType textNoSuggestions in react-native to disable the autocomplete #35691

Add inputType textNoSuggestions in react-native to disable the autocomplete #35691

fabOnReact commented Dec 20, 2022 •

edited

Loading

fabOnReact commented Dec 20, 2022 •

edited

Loading

fabOnReact commented Dec 20, 2022

analysis-bot commented Dec 20, 2022

analysis-bot commented Dec 20, 2022

pull-bot commented Dec 20, 2022

pull-bot commented Dec 20, 2022

NickGerleman commented Dec 21, 2022 •

edited

Loading

NickGerleman commented Dec 22, 2022

fabOnReact commented Dec 22, 2022 •

edited

Loading

rikur commented Dec 27, 2022

chengweibo commented Dec 21, 2023 •

edited

Loading

	/*
	* This class is set as the KeyListener for the underlying TextView
	* It does two things
	* 1) Provides the same answer to getInputType() as the real KeyListener would have which allows
	* the proper keyboard to pop up on screen
	* 2) Permits all keyboard input through
	*/
	private static class InternalKeyListener implements KeyListener {

	private int mInputType = 0;

	public InternalKeyListener() {}

	public void setInputType(int inputType) {
	mInputType = inputType;
	}

Add inputType textNoSuggestions in react-native to disable the autocomplete #35691

Add inputType textNoSuggestions in react-native to disable the autocomplete #35691

Conversation

fabOnReact commented Dec 20, 2022 • edited Loading

Summary

Changelog

Test Plan

fabOnReact commented Dec 20, 2022 • edited Loading

fabOnReact commented Dec 20, 2022

analysis-bot commented Dec 20, 2022

analysis-bot commented Dec 20, 2022

pull-bot commented Dec 20, 2022

pull-bot commented Dec 20, 2022

NickGerleman commented Dec 21, 2022 • edited Loading

NickGerleman commented Dec 22, 2022

fabOnReact commented Dec 22, 2022 • edited Loading

rikur commented Dec 27, 2022

chengweibo commented Dec 21, 2023 • edited Loading

fabOnReact commented Dec 20, 2022 •

edited

Loading

fabOnReact commented Dec 20, 2022 •

edited

Loading

NickGerleman commented Dec 21, 2022 •

edited

Loading

fabOnReact commented Dec 22, 2022 •

edited

Loading

chengweibo commented Dec 21, 2023 •

edited

Loading