inputRef is null with custom input elements

[Phanabani]

TypeError: inputRef is null when using custom input elements. I will investigate why the ref never gets set. I'm wondering if it's a change from React 16 -> 18.

[Phanabani]

I've determined the issue occurs when a custom React element is passed which does not implement ref forwarding. I'll add an error message for users to make it more clear what the problem is (it took me a while to realize myself!).

[Phanabani]

After trying some things, I'm not sure this is feasible. It's difficult to check programmatically if a ref can be added to an element because React doesn't throw an error, it just writes a warning to the console, and then we're left with a null ref.

I can't test for null ref assignments though, because that also happens when the input element is unmounted, and I can't additionally test if the ref was already null, because the input element generator might change while an element is already being displayed (therefore ref is not null). I can't find a way to distinguish between an element unmounting and a ref failing to be assigned. 😓

[oxyno-zeta]

Hello @Phanabani ,

Good catch. What about those?

• For the moment (as we are still in V2), change the documentation to explicitly mark that input component must be compatible with a ref. Without the ref, we cannot get a value
• Maybe a little trick is possible. Put the setRef method into the input generator params and before cloning the element, check if the ref is populated, if yes do not use it in the clone, if not, use it.
• I must admit that I've reflected long time ago on removing all these components generator and switch to another solution (in v3 or 4 for example): render methods or component class. This will allow people to do whatever they what, no manual css anymore, just pure react

What do think?

Oxyno-zeta

[Phanabani]

@oxyno-zeta

I like these ideas! I think I'll add the documentation really quickly for 2.3.1, then possibly try the trick you suggested for 2.3.2 (if it works out). Your third point is also very cool! I'll add an issue to keep it in mind for the future.