[TextField] Display helperText on focus only

[Floriferous]

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?

[AlexAndriyanenko]

I can take this one, if nobody is working on it.

[oliviertassinari]

@AlexAndriyanenko Thanks for the interest in the issue. While I think that @Floriferous can already solve his problem with the current API and a form library, we have recently make a new module public: useFormControl, it would be interesting to better document it.

[gap777]

What's the status of this?

[oliviertassinari]

@gap777 Missing documentation for the public useFormControl hook.

[t49tran]

I have added a doc page for useFormControl #25899, hope this will help.

[t49tran]

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

[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