How can you access actual DOM element for things like Textarea component?

[purplepenguin2]

I need to be able to access things like scrollHeight and selectionStart/selectionEnd for the Textarea component, but there seems to be no way to actually access or reference those things short of just throwing a random blob of JavaScript using vanilla document.querySelector('textarea'), etc.

Is there any way to access this information, or is it just a known gap/limitation of using Cloudscape?

[purplepenguin2]

If this is a gap, is the best practice to simply wrap the component like so?

<div ref={myRef}>
  <Textarea />
</div>

and the reference it with something like?

myRef.current?.querySelector('textarea')

[jperals]

Hi,

The Cloudscape Textarea component does not offer such APIs (full API docs here), and relying on the component internals is really not recommended because we might change the internal implementation which might then break your functionality.

On the other hand, the Textarea is a quite simple component (essentially a custom styled native textarea) so if you really need such functionality, you might be better off with your own implementation of it, using our design tokens to let it match the Cloudscape styling. For reference, here is our own component implementation (you might not even need all of it) and here are the styles, in which most of the SCSS variables used are publicly available as design tokens.