fix(#2336): Fields without description are losing focus when an error…

… is shown for the first time. 🐛 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
adobe · Oct 5, 2021 · 1ae7d1a · 1ae7d1a
1 parent b4a3821
commit 1ae7d1a
Show file tree

Hide file tree

Showing 3 changed files with 8 additions and 24 deletions.
diff --git a/packages/@react-spectrum/label/src/Field.tsx b/packages/@react-spectrum/label/src/Field.tsx
@@ -76,27 +76,12 @@ function Field(props: SpectrumFieldProps, ref: RefObject<HTMLElement>) {
         showErrorIcon={showErrorIcon} />
     );
 
-    let renderChildren = () => {
-      if (hasHelpText) {
-        if (labelPosition === 'side') {
-          return (
-            <Flex direction="column" UNSAFE_className={classNames(labelStyles, 'spectrum-Field-wrapper')}>
-              {children}
-              {renderHelpText()}
-            </Flex>
-          );
-        }
-
-        return (
-          <>
-            {children}
-            {renderHelpText()}
-          </>
-        );
-      }
-
-      return children;
-    };
+    let renderChildren = () => (
+      <Flex direction="column" UNSAFE_className={classNames(labelStyles, 'spectrum-Field-wrapper')}>
+        {children}
+        {hasHelpText && renderHelpText()}
+      </Flex>
+    );
 
     return (
       <div

diff --git a/packages/@react-spectrum/label/test/Field.test.js b/packages/@react-spectrum/label/test/Field.test.js
@@ -52,7 +52,7 @@ describe('Field', function () {
     let {getByRole} = renderField({ref});
     let field = getByRole('textbox').closest('div');
 
-    expect(ref.current).toBe(field);
+    expect(ref.current).toBe(field.parentNode);
   });
   describe('help text', function () {
     describe('description', function () {

diff --git a/packages/@react-spectrum/numberfield/test/NumberField.test.js b/packages/@react-spectrum/numberfield/test/NumberField.test.js
@@ -58,11 +58,10 @@ describe('NumberField', function () {
 
     let root = props.label ? container.firstChild.firstChild : undefined;
     container = within(container).queryByRole('group');
-    let textField = container.firstChild;
+    let textField = within(container).queryByRole('textbox');
     let buttons = within(container).queryAllByRole('button');
     let incrementButton = buttons[0];
     let decrementButton = buttons[1];
-    textField = textField.firstChild;
     return {
       root,
       container,