Cursor skips characters when typing quickly in a TextArea

Forge Forge UI Kit and Custom UI
, ,
1

When using the TextArea with the ‘onChange’ and ‘value’ attributes in a UI Kit Forge app in Jira, the cursor jumps when typing quickly in the text area.

To reproduce:

  1. Add the code below to create a simple TextArea
  2. Set the cursor to the first position or to the middle of the dots
  3. Type some letters very quickly
  4. You will see that the dots now appear between your new letters

You could remove the ‘value’ attribute to prevent the problem from occurring, but then you wouldn’t be able to edit the value from the script.

import React, { useState } from 'react';
import ForgeReconciler, { TextArea } from '@forge/react';

const App = () => {
  const [text, setText] = useState("..........");

  return (
    <>
      <TextArea
        onChange={event => setText(event.target.value)}
        value={text}
      />
    </>
  );
};

ForgeReconciler.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>
);
2

Hello @PhilippeKromer ,

Yes, working with a TextArea can be tricky sometimes.
One possible solution is to manually control the caret (cursor) position.

First, attach a ref to your TextArea:

<TextArea
  ref={taRef}
  value={text}
  onChange={handleChange}
/>

Then, manage the caret position in your code:

Initialize the ref:

const taRef = useRef<HTMLTextAreaElement | null>(null);

Create a change handler that updates both the text and caret position:

const handleChange = (event: ChangeEvent<HTMLTextAreaElement>) => {
  setText(event.target.value);

  if (!taRef.current) return;

  setCaretPosition({
    start: taRef.current.selectionStart ?? 0,
    end: taRef.current.selectionEnd ?? 0,
  });
};

This way, you keep track of the caret manually and can restore it when needed, avoiding unexpected jumps.

3

Hi @FlixAndre ,

Thanks for the reply.

The problem is that I can’t manipulate the caret inside the UI kit. When I log the taRef.current inside a UI kit application, there are no props for selectionStart or selectionEnd.

On the other hand, I can manipulate and log these properties when using a Custom UI application, and alter the values so that the caret moves accordingly.

So, as far as I understand, you can only edit the properties intended by Atlassian when using the UI kit, and you have no control over the DOM element except when using a Frame.

1 Like
4

Here’s a quick update on that issue.

I reported it to Atlassian Support, who were able to replicate the problem.

The bug ticket: https://jira.atlassian.com/browse/ECO-1041

1 Like