[TextField] Fix server-side rendering

[oliviertassinari]

• PR has tests / docs demo, and is linted.
• Commit and PR titles begin with [ComponentName], and are in imperative form: "[Component] Fix leaky abstraction".
• Description explains the issue / use-case resolved, and auto-closes the related issue(s) (http://tr.im/vFqem).

Closes #3757.
Closes #4253.

I have added some tests. I should have added them the first time. That would have same me this PR 😁 .

@AJIH What do you think about this change instead?

[ajihyf]

This PR is more clear but requires manually setting unique name or id. #4253 is a little hacky but supports generating non-conflict ids in both client and server sides. It depends on your choice to trade off. 😉

[alitaheri]

Finding an id for every used TextField in an app only to support ssr seems overkill to me. I think @AJIH's method, though hacky is easier to deal with. Another approach would be, not to generate any id and only set id and htmlFor when the user provides an id, instead of auto-generating one if they don't. I think: "if you want SSR give id to every TextField" is less convenient than "if you want ARIA provide id to important TextFields"

[oliviertassinari]

@alitaheri The id is not only here for ARIA, it's also to make the floating label focusing the input.
I'm gonna close this PR. @AJIH method is more resilient and I can't find real edge cases.

[alitaheri]

@oliviertassinari Ops 😅 😅 sorry about that, I didn't know.

[oliviertassinari]

@AJIH @alitaheri Thanks for the input 👍.