'Prevent React Native Modal from returning focus to TextInput when closed

I have a situation where I am using the onFocus method of a TextInput (call it "main TextInput") to open a Modal. The problem I'm having is when I focus on a separate TextInput inside the Modal (call it "Modal TextInput") and then close the Modal, the onFocus method of the main TextInput fires again and reopens the Modal. If at that point I close the Modal without focusing on the Modal TextInput, the main TextInput doesn't lose and regain focus, so the Modal does not reopen.

It's as if the main TextInput loses focus to the Modal TextInput and then closing the Modal returns the focus to the main TextInput with the following catch. As far as I can tell, the main TextInput does not actually lose focus because I created a simple console log test of the onBlur method and it's not firing.

I've seen a solution where someone used the blur method prior to actually opening the Modal, but they were using a button to open the Modal so they had an onPress they could use to execute multiple commands whereas I'm using the onFocus so the Modal immediately opens.

I attempted using the useRef hook to focus on an "invisible" TextInput when the onDismiss method of the Modal is called, but the behavior is the same. The weird thing there is using console logs (yes I'm an amateur) to see the order of events shows the onFocus of the main TextInput occurring again before the Modal onDismiss.

If someone knows a way to prevent this behavior, I would appreciate it.



Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source