Fields without description are losing focus when an error is shown for the first time.

[dompuiu]

🐛 Bug Report

If you have a TextField without a description, the focus on the field is lost as soon as an error is shown for the first time. This probably happens for all the fields that have Helper Text option.

🤔 Expected Behavior

Field should keep focus.

😯 Current Behavior

Field is losing the focus when the error is shown.

💁 Possible Solution

Probably use a useLayoutEffect to restore focus to the input if the input had focus previously.

🔦 Context

💻 Code Sample

https://codesandbox.io/s/lost-focus-44wtq

🌍 Your Environment

Software	Version(s)
react-spectrum	3.14.0
Browser	Chrome
Operating System	macOS 11.6

🧢 Your Company/Team

🕷 Tracking Issue (optional)

[dompuiu]

The possible solution listed in the description was proposed by @snowystinger during a Slack conversation. That won't prevent the field to be rerendered which is not very efficient. On top of that, when the focus need to be restored, the cursor needs to be added at the right position since it is not always at the end of the text from the field.

A possible alternative would be to render always the helper text container and have a height of 0 when it is empty.

[snowystinger]

Ah, yeah, that cursor issue is annoying. We should have access to it on the ref though through ref.current.selectionStart, but seems like we'd be reinventing the wheel. Might be better to just render the wrapper, however, it does carry some problems when put into a Form. See this issue:
#2324
Given that Forms are already known to have layout issues though, it may be best to just add the wrapper.
@devongovett @dannify