STCOM-1369: TextArea - move focus to the field after clearing the fie…

…ld by clicking on the x icon. (#2370)

CHANGELOG.md

@@ -53,6 +53,7 @@
 * Use `<Selection>`'s formatter for rendering the selected value within the field and prevent overflow of text. Refs STCOM-1344.
 * Export `<StripesOverlayWrapper>` that will automatically apply the `usePortal` behavior to nested overlay components. Refs STCOM-1353.
 * Properly pass `readOnly` prop to `<RadioButton>`'s internally rendered `<Label>`. Refs STCOM-1367.
+* `TextArea` - move focus to the field after clearing the field by clicking on the `x` icon. Refs STCOM-1369.
 
 ## [12.1.0](https://github.com/folio-org/stripes-components/tree/v12.1.0) (2024-03-12)
 [Full Changelog](https://github.com/folio-org/stripes-components/compare/v12.0.0...v12.1.0)

lib/TextArea/TextArea.js

@@ -10,6 +10,7 @@ import parseMeta from '../FormField/parseMeta';
 import formField from '../FormField';
 import TextFieldIcon from '../TextField/TextFieldIcon';
 import omitProps from '../../util/omitProps';
+import nativeChangeField from '../../util/nativeChangeFieldValue';
 import sharedInputStylesHelper from '../sharedStyles/sharedInputStylesHelper';
 
 import formStyles from '../sharedStyles/form.css';
@@ -284,6 +285,22 @@ class TextArea extends Component {
     onKeyDown(event);
   }
 
+  clearField = () => {
+    const { onClearField } = this.props;
+
+    if (typeof onClearField === 'function') {
+      onClearField();
+    }
+
+    // Clear value on input natively, dispatch an event to be picked up by handleChange, and focus on input again
+    if (this.textareaRef.current) {
+      nativeChangeField(this.textareaRef, true, '');
+      if (this.state.value !== '') {
+        this.setState({ value: '' });
+      }
+    }
+  }
+
   render() {
     /* eslint-disable no-unused-vars */
     const {
@@ -308,7 +325,6 @@ class TextArea extends Component {
       warning,
       hasClearIcon,
       clearFieldId,
-      onClearField,
       ...rest
     } = this.props;
 
@@ -359,7 +375,7 @@ class TextArea extends Component {
               aria-label={ariaLabel}
               icon="times-circle-solid"
               id={clearFieldId || `clickable-${this.testId}-clear-field`}
-              onClick={onClearField}
+              onClick={this.clearField}
               tabIndex="-1"
             />
           )}

lib/TextArea/tests/TextArea-test.js

@@ -15,7 +15,11 @@ describe('TextArea', () => {
     describe('rendering a basic TextArea', async () => {
       beforeEach(async () => {
         await mountWithContext(
-          <TextArea aria-label="test label" id="test" />
+          <TextArea
+            aria-label="test label"
+            id="test"
+            hasClearIcon
+          />
         );
       });
 
@@ -34,6 +38,14 @@ describe('TextArea', () => {
         beforeEach(() => textArea.fillIn('test'));
 
         it('updates the value', () => textArea.has({ value: 'test' }));
+
+        describe('then clicking clear', () => {
+          beforeEach(() => textArea.clear());
+
+          it('clears the value', () => textArea.has({ value: '' }));
+
+          it('focuses the textarea', () => textArea.is({ focused: true }));
+        });
       });
     });