STCOM-1289: Add 'isCursorAtEnd' property to 'TextArea' to place the c…

…ursor at the end of the value. (#2277)

CHANGELOG.md

@@ -6,6 +6,7 @@
 * Validate ref in `Paneset` before dereferencing it. Refs STCOM-1235.
 * Resolve bug with form control validation styles not rendering. Adjusted order of nested selectors. Refs STCOM-1284.
 * `<MultiSelection/>`'s overlay will use the overlay container as its boundary when the `renderToOverlay` prop is applied, as opposed to the scrollParent of the control. Refs STCOM-1282.
+* Add `isCursorAtEnd` property to `TextArea` to place the cursor at the end of the value. Refs STCOM-1289.
 
 ## [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

@@ -47,6 +47,7 @@ class TextArea extends Component {
       PropTypes.func,
       PropTypes.shape({ current: PropTypes.instanceOf(Element) }),
     ]),
+    isCursorAtEnd: PropTypes.bool,
     label: PropTypes.node,
     loading: PropTypes.bool,
     /**
@@ -154,6 +155,22 @@ class TextArea extends Component {
   }
 
   containerRef = React.createRef();
+  textareaRef= React.createRef();
+
+  componentDidMount() {
+    const { isCursorAtEnd } = this.props;
+
+    if (isCursorAtEnd) {
+      this.placeCursorAtEnd();
+    }
+  }
+
+  placeCursorAtEnd = () => {
+    const textarea = this.textareaRef.current;
+    const valueLength = textarea.value.length;
+
+    textarea.setSelectionRange(valueLength, valueLength);
+  }
 
   moveEndContent = (dimensions) => {
     const containerWidth = this.containerRef?.current?.offsetWidth;
@@ -164,6 +181,8 @@ class TextArea extends Component {
   };
 
   setInputRef = (ref) => {
+    this.textareaRef.current = ref;
+
     if (this.props.inputRef) {
       this.props.inputRef.current = ref;
     }

lib/TextArea/readme.md

@@ -46,6 +46,7 @@ import { TextArea } from '@folio/stripes/components';
 | `fullWidth` | boolean | If the field should stretch to fill its container | | |
 | `id` | string | Adds a custom ID to the control | | |
 | `inputRef` | ref | Ref to the internal HTMLTextArea | | |
+| `isCursorAtEnd` | boolean | Place the cursor at the end of the field value | | |
 | `label` | node | The input's label | | |
 | `loading` | boolean | Adds a loading spinner to the control | | |
 | `lockWidth` | boolean | Prevent the user from changing the width | | |

lib/TextArea/tests/TextArea-test.js

@@ -189,4 +189,27 @@ describe('TextArea', () => {
       });
     });
   });
+
+  describe('supplying isCursorAtEnd', () => {
+    const textArea = Interactor();
+    const value = 'test value';
+
+    beforeEach(async () => {
+      await mountWithContext(
+        <TextArea
+          isCursorAtEnd
+          value={value}
+        />
+      );
+    });
+
+    it('should place the cursor to the end of the value', () => {
+      textArea.perform(el => {
+        const textarea = el.querySelector('textarea');
+
+        expect(textarea.selectionStart).to.equal(value.length);
+        expect(textarea.selectionEnd).to.equal(value.length);
+      });
+    });
+  });
 });