[TextField] Display helperText on focus only

There may already be a nice way to do this, but I couldn’t find it.

I’d like to be able to display an Input’s FormHelperText only if the input is focused. It should however always display the helperText if it is an error (and override the helperText).

I believe these are the main possible states:

• If input is error: true, display the error helperText
• If input is error: false, and input is focused: display the helperText
• If input is error: false, and input is not focused: don’t display the helperText
• If input is error: false, and input is not focused, but something like alwaysDisplay: true is set on the FormHelperText component, then display the helperText

Excluded states:

• No helperText provided -> don’t display it obviously
• Space (' ') helperText provided, show placeholder space for a potential helperText later

Related to #2474

Maybe the component’s API could be revisited to handle these use cases more easily? Make it easier to pass in helperText, and errorHelperText together for example?

[andraMacadamian]

For me focused doesn’t get updated when using a TextField. I only get the initial false value and no updates later on, even though onFocus and onBlur get triggered. Replacing TextField with other inputs does trigger value updates for focused. Here is a forked sandbox from the docs for useFormControl showing the different behavior for focused when used with TextField and OutlinedInput: https://codesandbox.io/s/useformcontrol-material-demo-forked-2wbxl9?file=/demo.js

[t49tran]

I created a PR to add a section for useFormControl to the TextField document.