Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Crash on email detection in TextInput on Xiaomi devices running android 10 #27204

Closed
gbalduzzi opened this issue Nov 12, 2019 · 82 comments
Closed
Labels
Bug Component: TextInput Related to the TextInput component. Needs: Author Feedback Needs: Repro This issue could be improved with a clear list of steps to reproduce the issue. Newer Patch Available Platform: Android Android applications. Stale There has been a lack of activity on this issue and it may be closed soon.

Comments

@gbalduzzi
Copy link

gbalduzzi commented Nov 12, 2019

Xiaomi devices running android 10 show a little popup with the Text Frequent email when they detect a valid email address in the text input currently selected. This feature causes some crashes on my react native app. Sadly I can't reproduce in on an empty project, but it always happens on some inputs in my app. I have not been able to determine the difference between the textinputs that causes the problem and the textinput that does not cause any crash.

React Native version: 0.61.2

Steps To Reproduce

  1. Select a textinput
  2. digit a valid email address (such as test@test.com). As soon as I type the last c (creating a valid email format), the app crashed

The error:

java.lang.NullPointerException · Attempt to invoke direct method 'void android.widget.Editor$SelectionModifierCursorController.initDrawables()' on a null object reference

The full stack trace:

java.lang.NullPointerException: Attempt to invoke direct method 'void android.widget.Editor$SelectionModifierCursorController.initDrawables()' on a null object reference
        at android.widget.Editor$SelectionModifierCursorController.access$300(Editor.java:6696)
        at android.widget.Editor.getEmailPopupWindow(Editor.java:1469)
        at android.widget.Editor.showEmailPopupWindow(Editor.java:1477)
        at android.widget.Editor.handleEmailPopup(Editor.java:1456)
        at android.widget.Editor.updateCursorPosition(Editor.java:2099)
        at android.widget.TextView.getUpdatedHighlightPath(TextView.java:7813)
        at android.widget.TextView.onDraw(TextView.java:7998)
        at android.view.View.draw(View.java:21472)
        at android.view.View.updateDisplayListIfDirty(View.java:20349)
        at android.view.ViewGroup.recreateChildDisplayList(ViewGroup.java:4396)
        at android.view.ViewGroup.dispatchGetDisplayList(ViewGroup.java:4369)
        at android.view.View.updateDisplayListIfDirty(View.java:20309)
        at android.view.ViewGroup.recreateChildDisplayList(ViewGroup.java:4396)
        at android.view.ViewGroup.dispatchGetDisplayList(ViewGroup.java:4369)
        at android.view.View.updateDisplayListIfDirty(View.java:20309)
        at android.view.ViewGroup.recreateChildDisplayList(ViewGroup.java:4396)
        at android.view.ViewGroup.dispatchGetDisplayList(ViewGroup.java:4369)
        at android.view.View.updateDisplayListIfDirty(View.java:20309)
        at android.view.ViewGroup.recreateChildDisplayList(ViewGroup.java:4396)
        at android.view.ViewGroup.dispatchGetDisplayList(ViewGroup.java:4369)
        at android.view.View.updateDisplayListIfDirty(View.java:20309)
        at android.view.ViewGroup.recreateChildDisplayList(ViewGroup.java:4396)
        at android.view.ViewGroup.dispatchGetDisplayList(ViewGroup.java:4369)
        at android.view.View.updateDisplayListIfDirty(View.java:20309)
        at android.view.ViewGroup.recreateChildDisplayList(ViewGroup.java:4396)
        at android.view.ViewGroup.dispatchGetDisplayList(ViewGroup.java:4369)
        at android.view.View.updateDisplayListIfDirty(View.java:20309)
        at android.view.ViewGroup.recreateChildDisplayList(ViewGroup.java:4396)
        at android.view.ViewGroup.dispatchGetDisplayList(ViewGroup.java:4369)
        at android.view.View.updateDisplayListIfDirty(View.java:20309)
        at android.view.ViewGroup.recreateChildDisplayList(ViewGroup.java:4396)
        at android.view.ViewGroup.dispatchGetDisplayList(ViewGroup.java:4369)
        at android.view.View.updateDisplayListIfDirty(View.java:20309)
        at android.view.ViewGroup.recreateChildDisplayList(ViewGroup.java:4396)
        at android.view.ViewGroup.dispatchGetDisplayList(ViewGroup.java:4369)
        at android.view.View.updateDisplayListIfDirty(View.java:20309)
        at android.view.ViewGroup.recreateChildDisplayList(ViewGroup.java:4396)
        at android.view.ViewGroup.dispatchGetDisplayList(ViewGroup.java:4369)
        at android.view.View.updateDisplayListIfDirty(View.java:20309)
        at android.view.ViewGroup.recreateChildDisplayList(ViewGroup.java:4396)
        at android.view.ViewGroup.dispatchGetDisplayList(ViewGroup.java:4369)
        at android.view.View.updateDisplayListIfDirty(View.java:20309)
        at android.view.ViewGroup.recreateChildDisplayList(ViewGroup.java:4396)
        at android.view.ViewGroup.dispatchGetDisplayList(ViewGroup.java:4369)
        at android.view.View.updateDisplayListIfDirty(View.java:20309)
        at android.view.ViewGroup.recreateChildDisplayList(ViewGroup.java:4396)
        at android.view.ViewGroup.dispatchGetDisplayList(ViewGroup.java:4369)
        at android.view.View.updateDisplayListIfDirty(View.java:20309)
        at android.view.ViewGroup.recreateChildDisplayList(ViewGroup.java:4396)
        at android.view.ViewGroup.dispatchGetDisplayList(ViewGroup.java:4369)
        at android.view.View.updateDisplayListIfDirty(View.java:20309)
        at android.view.ViewGroup.recreateChildDisplayList(ViewGroup.java:4396)
        at android.view.ViewGroup.dispatchGetDisplayList(ViewGroup.java:4369)
        at android.view.View.updateDisplayListIfDirty(View.java:20309)
        at android.view.ViewGroup.recreateChildDisplayList(ViewGroup.java:4396)
2019-11-12 17:19:57.876 20111-20111/com.yourvoice.ccApp.dev E/AndroidRuntime:     at android.view.ViewGroup.dispatchGetDisplayList(ViewGroup.java:4369)
        at android.view.View.updateDisplayListIfDirty(View.java:20309)
        at android.view.ThreadedRenderer.updateViewTreeDisplayList(ThreadedRenderer.java:575)
        at android.view.ThreadedRenderer.updateRootDisplayList(ThreadedRenderer.java:581)
        at android.view.ThreadedRenderer.draw(ThreadedRenderer.java:654)
        at android.view.ViewRootImpl.draw(ViewRootImpl.java:3687)
        at android.view.ViewRootImpl.performDraw(ViewRootImpl.java:3482)
        at android.view.ViewRootImpl.performTraversals(ViewRootImpl.java:2819)
        at android.view.ViewRootImpl.doTraversal(ViewRootImpl.java:1782)
        at android.view.ViewRootImpl$TraversalRunnable.run(ViewRootImpl.java:7785)
        at android.view.Choreographer$CallbackRecord.run(Choreographer.java:1031)
        at android.view.Choreographer.doCallbacks(Choreographer.java:854)
        at android.view.Choreographer.doFrame(Choreographer.java:789)
        at android.view.Choreographer$FrameDisplayEventReceiver.run(Choreographer.java:1016)
        at android.os.Handler.handleCallback(Handler.java:883)
        at android.os.Handler.dispatchMessage(Handler.java:100)
        at android.os.Looper.loop(Looper.java:221)
        at android.app.ActivityThread.main(ActivityThread.java:7520)
        at java.lang.reflect.Method.invoke(Native Method)
        at com.android.internal.os.RuntimeInit$MethodAndArgsCaller.run(RuntimeInit.java:539)
        at com.android.internal.os.ZygoteInit.main(ZygoteInit.java:950)
@gbalduzzi gbalduzzi added the Bug label Nov 12, 2019
@react-native-bot react-native-bot added Component: TextInput Related to the TextInput component. Platform: Android Android applications. labels Nov 12, 2019
@gbalduzzi
Copy link
Author

This issue is related to: #20887

Basically, when the issue described in #20887 occurs and you can't open the context menu, if you digit an email address in a Xiaomi devices running the latest OS version it results in an app crash.

The workaround described in #20887 fixes this issue too

@matheusmichels
Copy link

having the same issue =(

@mikelros
Copy link

Same problem here. It only happens on Xiaomi devices running Android 10.

@musemind
Copy link

musemind commented Nov 21, 2019

We also fixed this hacky with a hooks version of #20887 (comment)

It works but it breaks the autoFocus prop.

const [editable, setEditable] = React.useState(false)

React.useEffect(() => {
  React.useEffect(() => {
  setTimeout(() => {
    setEditable(true)
  }, 100)
}, [])

return (
  <TextInput
    editable={editable}
    ...
  />
)

@nonewcode
Copy link

I have a user that is experiencing this same issue. Is it related to the autofocus when going to a screen? It's quite hard to replicate but had a couple of crashes when trying it myself.

@gbalduzzi
Copy link
Author

It happened to me on screens without any autofocus, but sadly I had not been able to understand what the underlying cause is.

@giftedunicorn
Copy link

giftedunicorn commented Jan 9, 2020

Same issue here. User gave one star review for this. 😢

@metinilhan
Copy link

I have same problem with RN 0.61.4

@Oliverxyj123
Copy link

having same issue with RN 0.59.0

@Oliverxyj123
Copy link

We also fixed this hacky with a hooks version of #20887 (comment)

It works but it breaks the autoFocus prop.

const [editable, setEditable] = React.useState(false)

React.useEffect(() => {
  React.useEffect(() => {
  setTimeout(() => {
    setEditable(true)
  }, 100)
}, [])

return (
  <TextInput
    editable={editable}
    ...
  />
)

I try, but cannot fix this crash.

@jcalvet
Copy link

jcalvet commented Jan 17, 2020

I think found a workaround. Basically we need to set "secureTextEntry" in true and on "onLayout" method, changed the value into false.

@giftedunicorn
Copy link

I think @ musemind's solution fixed my problem.

@ghost
Copy link

ghost commented Jan 30, 2020

Removing <item name="android:windowTranslucentStatus">true</item> from styles.xml on Android side fixes the issue.

@computationalcore
Copy link

computationalcore commented Feb 5, 2020

Same problem here, none of the proposed solutions worked in my production app. I have several thousands of users so far (released a few days ago). The models MI 9 (cepheus), Redmi K20 Pro (raphael), and Mi 9T (davinci), are experiencing this issue, they can't even create an account on my app. And the 1 star review keep coming...

@ahdzlee
Copy link

ahdzlee commented Feb 10, 2020

I had to set caretHidden to true and it's not crashing the app now (tested on Redmi K30).
The downside is you can't use the context menu actions. I am okay though with the trade off (for now) considering I'll be using it only on email address inputs.

<TextInput
    caretHidden
    autoCapitalize='none'
    autoCorrect={false}
    keyboardType='email-address'
    autoCompleteType='email'
/>

@WouterFlorijn
Copy link

It would be great if this issue could get some attention from the React Native team. I initially fixed it using the timeout/editable workaround described here and in #20887, but since we migrated from Expo 34 to Expo 36 (React Native 0.61.5), it has returned and the workaround doesn't seem to work anymore.

This is exactly the type of bug that causes terrible user experiences, even if it's limited to a set of devices. The users impacted are quick to churn and write 1-star reviews.

@tststs
Copy link

tststs commented Feb 14, 2020

Same issue here on a MI 9.
Setting caretHidden={true} is the only solution that works but really destroys the user experience.

@ezranbayantemur
Copy link

Same here.. +1

@alyleite
Copy link

Same issue here on a MI 9.
Setting caretHidden={true} is the only solution that works but really destroys the user experience.

Same issue here on a MI Mix 2s.

@GoMino
Copy link

GoMino commented Feb 20, 2020

Yes even if caretHidden is a workaround, it cannot be an acceptable solution as you won't be able to see the cursor in the EditText anymore 😞

@alimek
Copy link

alimek commented Feb 20, 2020

i have plan for now just use caretHidden property untill this is going to be fixed. It is not acceptable from UX point of view, but its better than crashing app and in our example, user cant even log into app.

btw. anyone has maybe function which check if device is Xiaomi ?

@camel113
Copy link

What about using react-native-device-info to check if it Xiaomi to enable caretHidden ?

@alimek
Copy link

alimek commented Feb 23, 2020

thats my plan for now, but i don’t have Xiaomi device to check what exactly device model returns, thats why i am asking for it 🤔

@ariona
Copy link

ariona commented Feb 24, 2020

I am experiencing this issue, any update for this? this happen only when the TextInput is prefilled with email value.

@ezranbayantemur
Copy link

For temperary fix you can use like this as mentioned at #20887 (comment) :

..
..
constructor(props) {
    super(props)
    
     this.state = { editable: false }
  }

  componentDidMount() {
      setTimeout(() => { this.setState({ editable: true }) }, 100);
  }

  render() {
    return (
         ...
         ... 
            <TextInput editable={this.state.editable} />
        ...
        ...
      )
   }
}

It's temperary but it works for now. But of course it should be fixed soon as possible.

@ramirobg94
Copy link

+1

@kai234
Copy link

kai234 commented Apr 9, 2020

I found the problem. This is a bug in the mi system on android 10, because it will have a prompt view when you type an email in the input box.When we put the input box in the scroll view, the system failed to locate the prompt view properly, causing the application to crash.If the input field is outside of the scroll view you can avoid this problem and hopefully this will help you out, this is not the optimal solution.Because it might require us to change our layout.That's what I'm going to do.

@gusgard
Copy link
Contributor

gusgard commented Oct 14, 2020

It seems this issue was fixed on React native 0.63.3, could someone double-check?

https://github.com/react-native-community/releases/blob/master/CHANGELOG.md#fixed
07a597a

@AndreasA
Copy link

See comments above.

That fix does not necessarily fix it as using default keyboard type does not ensure the issue does not happen. It occurs as soon as an email address like string is inputed.
Also it does not take into account all Xiaomi UI devices.
And it is actually more of a workaround than a solution.

@FaizanMostafa
Copy link

FaizanMostafa commented Oct 17, 2020

It took me some time to find out that if I type a . (dot) in the email input field and then clear it, after that typing the email does not crash the app anymore. So here is yet another workaround that does not include caret hiding and still working for me on Redmi 9.

const [email, setEmail] = useState(".");

useEffect(() => {
  setTimeout(() => {
    setEmail("");
  }, 1);
}, []);

@Thibaud05
Copy link

It seems this issue was fixed on React native 0.63.3, could someone double-check?

https://github.com/react-native-community/releases/blob/master/CHANGELOG.md#fixed
07a597a

This issue was fixed on React native 0.63.3 go npx react-native upgrade

@douglasjunior
Copy link

douglasjunior commented Nov 11, 2020

This issue was fixed on React native 0.63.3 go npx react-native upgrade

As mentioned by me and @AndreasA, its NOT fixed on 0.63.3, for many reasons.

@ragamufin
Copy link

Sharing our solution for this problem that uses the editable solution listed before but also works (in our tests) for autoFocus. Setting caretHidden to true does work but it makes for a jarring UI. Using the editable workaround the user experience is not changed.

This is our text field component that we use instead of calling TextInput directly:

import { Platform, TextInput } from 'react-native'
import { getBrand } from 'react-native-device-info'

const EMAIL_CRASH_WORKAROUND_BRANDS = ['m2002j9g', 'm2002j9g', 'm2004j19c', 'm2007j20cg', 'mi', 'mi', 'mix', 'poco', 'pocophone', 'redmi', 'xiaomi']
const EMAIL_CRASH_WORKAROUND_NEEDED = EMAIL_CRASH_WORKAROUND_BRANDS.includes(getBrand().toLowerCase()) && Platform.Version > 28

I stripped down our code to show the relevant methods of the component:

// allows parent to set focus to the input
focus(){
	// console.log('set focus to text field')
	// set flag so we know if focus() was called
	this.wasFocusHandlerCalled = true 
	this.input.focus()
},

// capture reference to the input
setRef(ref){
	this.input = ref
},

render(){
	let attribs = {}
	// email crash workaround
	if(EMAIL_CRASH_WORKAROUND_NEEDED){
		if(this.state && this.state.emailCrashEditable)
			attribs.editable = 'editable' in this.props ? this.props.editable : true
		else
			attribs.editable = 'editable' in this.props ? !this.props.editable : false

		// console.log(`editable for ${this.props.fieldName}:`, attribs.editable)
	}

	return (
		<TextInput 				
			ref={this.setRef}
			{... this.props}
			{ ... attribs} 
		/>
	)
}

Finally the most important part. We toggle the editable prop of the input once the component is loaded.
We check for the autoFocus prop here and set focus if necessary.
A parent component using a ref to this component could call focus() on it so we also check if that was called and set focus if necessary:

componentDidMount(){
	// 'editable' email crash workaround 
	if(EMAIL_CRASH_WORKAROUND_NEEDED){
		setTimeout(() => {
			if(this.hasUnmounted) return // set this in componentWillUnmount

			// console.log('set emailCrashEditable')
			this.setState({ emailCrashEditable: true }, () => {
				if(this.props.autoFocus || this.wasFocusHandlerCalled){
					// when focus was set by calling the focus handler then we need to blur it first
					if(this.wasFocusHandlerCalled)
						this.input.blur()

					this.input.focus()
				}
			})
		}, 100)
	}
}

Looking forward to an actual fix for this in the core code so that we can get rid of this kludgy workaround.

@oliuradu
Copy link

+1, i use the carretHide but i need a better solution

@torvicmx
Copy link

having the same issue =(

La aplicación se rompe cuando se escribe un punto en el control. Al parecer esta solución funciona para mi, en un dispositivo redmi note 9.

const [email, setEmail] = useState('.');

useEffect(() => { setTimeout(() => { setEmail(''); }, 1); }, []);

<Input placeholder="Email" value={email} />

=)

@BhavyaKoshiya

This comment has been minimized.

@jcisz
Copy link

jcisz commented Mar 23, 2021

I have this problem when I have an input on a screen that is in a bottomNavigator or in a Stack inside the bottomNavigator.
If I use it only on a stack it does not crash the application

I´m using

  • RN version 0.63.0
  • react-navigation/bottom-tabs: 5.11.8
  • react-navigation/native: 5.9.3
  • react-navigation/stack: 5.14.3

The caret and disabled workaround are working.

@kevinrichard31
Copy link

It took me some time to find out that if I type a . (dot) in the email input field and then clear it, after that typing the email does not crash the app anymore. So here is yet another workaround that does not include caret hiding and still working for me on Redmi 9.

const [email, setEmail] = useState(".");

useEffect(() => {
  setTimeout(() => {
    setEmail("");
  }, 1);
}, []);

it sounds the best fix GG man

philippeauriach pushed a commit to philippeauriach/react-native that referenced this issue May 5, 2021
Summary:
After monitoring scuba for a few days,  previous fixes(D23301714 D23331828 (facebook@07a597a)) don't work as expected.

I managed to test this issue on a Xiaomi device, the crash didn't happen but the there was a popup "Frequetly used email" on top of email edit text:

{F317216473}

Getting rid of the popup probably be the right fix.

For more context see facebook#27204

Changelog: [Android] - Set caretHidden to true to fix the Xiaomi crash

Reviewed By: mdvacca

Differential Revision: D23451929

fbshipit-source-id: 521931422f3a46a056a9faa4b10fe93cf4732db0
@Bardiamist
Copy link
Contributor

No crash in React native 0.64.1 but caret is hidden.

@douglasjunior
Copy link

douglasjunior commented Jun 2, 2021

@Bardiamist this is because a totally wrong "fix" was accepted by the core team. As we mentioned here #27204 (comment), #27204 (comment) and #27204 (comment).

@athinab
Copy link

athinab commented Jul 2, 2021

Hi! I have a few crashes related to this issue, too.

Any news regarding this?

Thanks

@Frans06
Copy link

Frans06 commented Aug 20, 2021

Works for me, not optimal but a seamless solution for me.

  const [caretLoaded, setCaretLoaded] = useState(true)

  useEffect(() => {
    setCaretLoaded(false)
  }, [])
 
  return (
      <InpupText
          caretHidden={caretLoaded}
      />
  )

@yungkittty
Copy link

Has anyone tried contextMenuHidden props?

@stale
Copy link

stale bot commented Jan 9, 2022

Hey there, it looks like there has been no activity on this issue recently. Has the issue been fixed, or does it still require the community's attention? This issue may be closed if no further activity occurs. You may also label this issue as a "Discussion" or add it to the "Backlog" and I will leave it open. Thank you for your contributions.

@stale stale bot added the Stale There has been a lack of activity on this issue and it may be closed soon. label Jan 9, 2022
@Bardiamist
Copy link
Contributor

Still issue

@stale stale bot removed the Stale There has been a lack of activity on this issue and it may be closed soon. label Jan 9, 2022
@arshidkv12
Copy link

Any solution?

@BhavyaKoshiya
Copy link

BhavyaKoshiya commented Jan 10, 2022

Any solution?
@Bardiamist

Try:

<TextInput caretHidden={true} ... />

See: https://facebook.github.io/react-native/docs/textinput#carethidden

@arshidkv12
Copy link

Sorry... Not working on redmi note 9 pro max.

@YunusEmreNalbant
Copy link

I had to set caretHidden to true and it's not crashing the app now (tested on Redmi K30). The downside is you can't use the context menu actions. I am okay though with the trade off (for now) considering I'll be using it only on email address inputs.

<TextInput
    caretHidden
    autoCapitalize='none'
    autoCorrect={false}
    keyboardType='email-address'
    autoCompleteType='email'
/>

you saved my day. thank you

@github-actions
Copy link

github-actions bot commented Mar 1, 2023

This issue is waiting for author's feedback since 24 days. Please provide the requested feedback or this will be closed in 7 days.

@github-actions github-actions bot added the Stale There has been a lack of activity on this issue and it may be closed soon. label Mar 1, 2023
@github-actions
Copy link

github-actions bot commented Mar 8, 2023

This issue was closed because the author hasn't provided the requested feedback after 7 days.

@github-actions github-actions bot closed this as completed Mar 8, 2023
@facebook facebook locked as resolved and limited conversation to collaborators Mar 9, 2023
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
Bug Component: TextInput Related to the TextInput component. Needs: Author Feedback Needs: Repro This issue could be improved with a clear list of steps to reproduce the issue. Newer Patch Available Platform: Android Android applications. Stale There has been a lack of activity on this issue and it may be closed soon.
Projects
None yet
Development

No branches or pull requests