Focusing on input of GiftedChat

[anauk]

Issue Description

On screen with GiftedChat, when try to open a modal with an input field, the focus remains on the input field of the GiftedChat. How can put cursor and tipping on input in Modal?
I tried to use: if (inputRef.current) {
inputRef.current.blur(); // Blur the input manually
} for input of GiftedChat, but i doesn't help

Steps to Reproduce / Code Snippets

on screen with GiftedChat set up listener which shows Modal with input if need it. When Modal appears and i want white in input, keyboard appears but i don't see where i'm typing. When i close Modal i see that it was typing in input of GiftedChat.

Expected Results

If Modal was opened i can typing in input of Modal

Additional Information

• Nodejs version: 18.20.4
• React version: 18.2.0
• React Native version: 0.74.3
• react-native-gifted-chat version: ^2.6.4
• Platform(s) (iOS, Android, or both?): both

[danilvalov]

I missed this issue and created an issue with the same problem.
So I copy my researching results to this issue to have more detailed view.

Very interesting bug with useAnimatedReaction hook.

This hook works globally for keyboard on all screens, so if GiftedChat was rendered and we keep it in memory then any keyboard opening calls handleTextInputFocusWhenKeyboardShow callback that tries to focus on GiftedChat TextInput. And it breaks all TextInputs in apps.

Steps to Reproduce / Code Snippets

0. (optional) Use @react-navigation in your app (with setting to keep rendered screens in app memory)
1. Add <GiftedChat /> to the second screen of your app
2. Add some another <TextInput /> to the first screen of your app
3. Open your app and focus on your <TextInput /> on the first screen
4. Touch some place out of the this text input (it works correctly, keyboard is hide)
5. Open the second screen with GiftedChat (to render this component first time)
6. Open the first screen with <TextInput /> again
7. Touch some place out of the this text input (it works incorrect already, keyboard is show anyway)

[danilvalov]

There is not any way to fix it without injections to <GiftedChat /> component in this library.

I think the best solution is to add a prop focusOnInputWhenOpeningKeyboard (with true value by default) to disable handleTextInputFocusWhenKeyboardShow and handleTextInputFocusWhenKeyboardHide calls.

[danilvalov]

I added PR #2573 to fix it

[anauk]

Thank you

…

On Mon, 23 Dec 2024 at 20:23, Danil Valov ***@***.***> wrote: There is not any way to fix it without injections to <GiftedChat /> component in this library. I think the best solution is to add a prop focusInputWhenKeyboardOpens (with true value by default) to disable handleTextInputFocusWhenKeyboardShow and handleTextInputFocusWhenKeyboardHide calls. — Reply to this email directly, view it on GitHub <#2548 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AKLINDIECOQEJADQLZNK73T2HBPMBAVCNFSM6AAAAABQJZRC7SVHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMZDKNRQGE4TKOJWGI> . You are receiving this because you authored the thread.Message ID: ***@***.***>

[anauk]

Ok, thanks.

…

On Mon, 23 Dec 2024 at 20:39, Danil Valov ***@***.***> wrote: I added PR #2573 <#2573> to fix it — Reply to this email directly, view it on GitHub <#2548 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AKLINDLTP3AIUEGZUIMTDPD2HBRFXAVCNFSM6AAAAABQJZRC7SVHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMZDKNRQGIYTCNRZHE> . You are receiving this because you authored the thread.Message ID: ***@***.***>