How to focus a textarea and select all text

[spassvogel]

I am using a TextArea from react-aria-components. What i'm trying to do is once I click a button, the textareas text gets filled and the text gets selected.

I tried adding a ref and in a useEffect add

        outputRef.current.focus()
        outputRef.current.select()

but it seems that some internal react-aria mechanism is taking over control over the focus? because it only very rarely works, and only for a split second. What is the recommended way to do this in react-aria-components?

[snowystinger]

Seems to work https://codesandbox.io/p/sandbox/agitated-https-47f9rn?file=%2Fsrc%2FApp.js%3A7%2C20
Can you explain more?

If you were trying to set the ref via the context, then you need to merge it, see #6416

[spassvogel]

Aah I see. I was setting the defaultValue on the TextArea directly. I didn't know I had to wrap it in a TextField and set that value.

https://codesandbox.io/p/sandbox/kind-spence-nqrzpm (this is what I was attempting..)

many thanks!

[snowystinger]

sandbox is private
but yeah, TextArea should be implemented like so https://react-spectrum.adobe.com/react-aria/TextField.html#multi-line