Insert text into FluentTextField or FluentTextArea at cursor position?

[Stephen-Lamb]

Hi,

Does anyone know if it is possible to insert text into a FluentTextField or FluentTextArea at the current cursor position, using something like the JS function setRangeText()? Or should I just use a InputText or InputTextArea component instead? Thanks.

[dvoituron]

Yes, you can use the same JS function. The only difference is that the input element is inside a web component (so you need to use a shadowRoot (see https://developer.mozilla.org/en-US/docs/Web/API/Web_components/Using_shadow_DOM).

[Stephen-Lamb]

Thanks for that, it was easy to access the embedded controls using shadowRoot as you suggested. However, I eventually decided to stick with the InputText and InputTextArea controls instead though, as I couldn't reliably set the cursor position in the Fluent controls (using the JS function setSelectionRange). Sometimes it would set the cursor where I wanted, but sometimes the cursor would just end up at the end of the text. I suspect I'm tripping over some sort of timing issue with setting the focus in Fluent (or around rendering), though it's also possible I'm doing something wrong.