focusDidSet is not called when TextInput has showSoftInputOnFocus={false}

[KingDoxik]

Describe the bug
focusDidSet is not called when TextInput has showSoftInputOnFocus={false}. There is probably a deeper problem with showSoftInputOnFocus. I started investigating this, because I want to show custom keyboard in an app for some TextInputs and I want to add KeyboardController.setFocusTo("next") - which is not working with showSoftInputOnFocus={false}. This problem stems from onFocusDidSet being called from keyboardWillShow. I am not sure if there is a better solution, but this is what I was able to figure out without knowing iOS dev.

Code snippet
<TextInput
onFocus={handleFocus}
onBlur={handleBlur}
className="p-3 bg-zinc-800 text-white rounded-xl"
showSoftInputOnFocus={false}
{...props}
/>

Repo for reproducing
It should be reproducible in any repo by adding showSoftInputOnFocus={false} to react-native TextInput

To Reproduce
add showSoftInputOnFocus={false} to TextInput

Expected behavior
Focus change should be registered even if keyboard is not showed.

Screenshots
If applicable, add screenshots to help explain your problem.

Smartphone:

• Desktop OS: MacOS 14.5
• Device: iPhone 15 Pro
• OS: iOS 18.1.1
• RN version: 0.74.1
• RN architecture: both new and old
• JS engine: expo default
• Library version: 1.15.2

[kirillzyusko]

I've been waiting for this issue 😅

Just to confirm - it's iOS only, right?

[kirillzyusko]

This problem stems from onFocusDidSet being called from keyboardWillShow.

Yes, basically I treated keyboardWillShow as an indicator that keyboard was shown, but there is some corner cases when this even might not be called (i. e. iPad with a physical keyboard connected, or showSoftInputOnFocus={false}). And I believe instead of this event I should use becomeFirstResponder (this event is not available out-of-box on iOS, but I have some ideas on how to get it working) 👀

and I want to add KeyboardController.setFocusTo("next")

Do you call that API yourself? Or you use KeyboardToolbar? If you are using KeyboardToolbar how do you make it to show above your keyboard - do you manage it yourself?

[KingDoxik]

I am pretty sure this is an edge case most won't come across and I am probably using this library in a way it wasn't designed for. I made a few of my "own" keyboards for some inputs. I wanted to add a button to let the user continue to the next text-input. I was already using rn-keyboard-controller for the keyboard avoiding and for KeyboardToolbar, so checked what functions is the toolbar internally using for navigation. I don't think there is any other way of moving to the next text-input other than some hacky way of collecting refs in a global store and manually focusing the next.

I don't have a working Android version yet, but I could probably put together a simple reproduction example and test it.

An example of how I am using it now.
https://github.com/user-attachments/assets/dfcaec2b-bc10-427e-8f1a-d15d0a161cd4

[kirillzyusko]

Nice, UI is slick 🔥

I'll try to fix this problem! I believe I could reproduce it in my example project as well 👍

[KingDoxik]

Nice, UI is slick 🔥

I'll try to fix this problem! I believe I could reproduce it in my example project as well 👍

Thank you so much for your hard work on this amazing library!

[kirillzyusko]

@KingDoxik can you check if #760 fixes the problem?

[KingDoxik]

@KingDoxik can you check if #760 fixes the problem?

Yes, It works! 🔥 Thank you so much.

Zaznam.obrazovky.2025-01-21.v.11.10.39.mov

[kirillzyusko]

Awesome @KingDoxik 🔥 Will merge it today and will publish in 1.16.0 (hopefully by the end of the week).