fix(#2336): Fields without description are losing focus when an error is shown for the first time.

[majornista]

🐛 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

Closes #2336

✅ Pull Request Checklist:

• Included link to corresponding React Spectrum GitHub Issue 2336.
• Added/updated unit tests and storybook for this change (for new code or code which already has tests).
• Filled out test instructions.
• Updated documentation (if it already exists for this component).
• Looked at the Accessibility Practices for this feature - Aria Practices

📝 Test Instructions:

🧢 Your Project:

Adobe/Accessibility

[adobe-bot]

Build successful! 🎉

• View the storybook
• View the storybook-17
• View the documentation

[snowystinger]

Chromatic identified one issue https://www.chromatic.com/build?appId=5f0dd5ad2b5fc10022a2e320&number=141
I'm not sure if we'll be able to do anything about it, though it's weird that it's only affecting the large scale

[majornista]

Chromatic identified one issue https://www.chromatic.com/build?appId=5f0dd5ad2b5fc10022a2e320&number=141 I'm not sure if we'll be able to do anything about it, though it's weird that it's only affecting the large scale

I think this has to do with:

react-spectrum/packages/@adobe/spectrum-css-temp/components/fieldlabel/index.css

Lines 95 to 98 in b4a3821

	/* TODO: By default, vertical flex wrapper for `labelPosition: side` should have default field width.
	* This is a workaround until we find a better way to set the width of the field & help text.
	* Should default to form field's default width and and allow users to override with custom width. */
	width: var(--spectrum-field-default-width);

in .spectrum-Field.spectrum-Field--positionSide .spectrum-Field-wrapper, but if I remove it or change it based on hasHelpText, I get more chromatic errors in other components. like ColorField.

Can we accept the ComboBox changes as a new baseline?

Also, I notice that the NumberField layout is broken by the use of display: table-cell overriding display: flex at

react-spectrum/packages/@adobe/spectrum-css-temp/components/fieldlabel/index.css

Line 145 in b4a3821

display: table-cell;

[snowystinger]

@majornista yeah, Forms are pretty broken already #2324
It may be that this is fine because they're already pretty bad, just pointing it out for reviews

[adobe-bot]

Build successful! 🎉

• View the storybook
• View the storybook-17
• View the documentation

[LFDanLu]

LGTM, tested locally by porting over the example from the codesandbox into our storybook. Is there an existing story that covers this bug (couldn't find one myself)? If so, I can approve otherwise would be good to add a test story to the HelpText stories

[adobe-bot]

Build successful! 🎉

• View the storybook
• View the storybook-17
• View the documentation

[devongovett]

This one seems to test it: https://reactspectrum.blob.core.windows.net/reactspectrum/ca8faaa6c90210facffefbaeda40eaa643e89582/storybook/index.html?path=/story/helptext--error-message-with-no-description