Forward ref to the underlying HTMLInputElement of the TextInput

[ob6160]

What is the purpose of this change?

Allow for a ref to be passed to the TextInput component so that a reference to the input element can be obtained.

Reason for the change

A planned usage of the TextInput component needs to listen on the blur and invalid events for a specific field so we can run validation code based on the built in HTML input validation.

Example of how it helps in our use case

Here we register two handlers, one to validate on the blur event, the other to act if an invalid event is fired on that specific field once validated.

[SiAdcock]

Thanks @ob6160. I totally agree we should be forwarding refs in the way you've implemented here, for all components. I'm wary that the React docs recommend treating this as a breaking change as the behaviour of refs will be observably different. I'm not sure to what extent people are dependent on the current behaviour, so I'd need to do a bit of investigation.

Before I do, I wonder whether the behaviour you're trying to achieve here can be accomplished using Synthetic Events? It appears React supports onInvalid and onBlur. Is it possible to tap into these events rather than use refs in this case?

[ob6160]

Thanks @ob6160. I totally agree we should be forwarding refs in the way you've implemented here, for all components. I'm wary that the React docs recommend treating this as a breaking change as the behaviour of refs will be observably different. I'm not sure to what extent people are dependent on the current behaviour, so I'd need to do a bit of investigation.

Before I do, I wonder whether the behaviour you're trying to achieve here can be accomplished using Synthetic Events? It appears React supports onInvalid and onBlur. Is it possible to tap into these events rather than use refs in this case?

Ah that's a really good point about it being a potentially breaking change! Okay, I'll await the results of your investigation. I'd be happy to take some time to make the PR to add ref forwarding for all components if it's all fine!

Will look into synthetic events.. it's the first I've heard of them (under that name)!

[ob6160]

Aha! I hadn't heard of "Synthetic Events" as the name for the pattern on<EventName> before. TIL! I can totally use those for my use case. I'll close this PR and we can continue the discussion in guardian/csnx#261 as you suggested