Merge branch 'refs/heads/master' into STCOM-1341

# Conflicts: # CHANGELOG.md
folio-org · Oct 23, 2024 · 521c4ef · 521c4ef
2 parents 342a6f4 + b0ec277
commit 521c4ef
Show file tree

Hide file tree

Showing 4 changed files with 34 additions and 5 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -53,7 +53,8 @@
 * 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.
-* Change repeatable fields focus behaviour. Refs STCOM-1341.
+* `TextArea` - move focus to the field after clearing the field by clicking on the `x` icon. Refs STCOM-1369.
+* Change `Repeatable field` focus behaviour. Refs STCOM-1341.
 
 ## [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)

diff --git a/lib/TextArea/TextArea.js b/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"
             />
           )}

diff --git a/lib/TextArea/tests/TextArea-test.js b/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 }));
+        });
       });
     });
 

diff --git a/translations/stripes-components/de.json b/translations/stripes-components/de.json
@@ -17,7 +17,7 @@
     "fieldHasError": "Feld hat Fehler",
     "addressLine1": "Anschriftenzeile 1",
     "addressLine2": "Anschriftenzeile 2",
-    "stateProviceOrRegion": "Bundesland",
+    "stateProviceOrRegion": "Staat / Land / Bundesland",
     "zipOrPostalCode": "PLZ/Postleitzahl",
     "addressType": "Adresstyp",
     "city": "Stadt",