Get cursor position in text edit

💬 App Building
1

Hi, I'd love to be able to get the cursor position in the text (integer number of characters from the beginning) when editing a text box!

I'd like to insert text into the text at the cursor point when the user clicks a button or such like. Therefore I would like to know the current position in the text as the focus leaves the text box and then insert the relevant text at that position?

Any ideas, or should I move this to feature request?

Thanks

Jeremy

2

Hi @jclutterbuck Thanks for sharing! I'm not aware of any workarounds, but we do have a feature request for this internally. I'll post here with any updates on that request

3

Hi @jclutterbuck,

We were able to launch this sort of feature for the rich text editor:

Does this type of implementation seem like it would be helpful for your use case? It sounds like you'd want to see this for other components. but I wanted to check in about this iteration & also see if it could be a potential workaround

4

Thanks @Tess,

Ideally I'd like to see this feature in the TextArea component, but, yes, great to see this feature here and I may be able to use it.

Thanks

Jeremy

1 Like
5

Any update on this? I'm trying to do the following:
Have a textarea where the user constructs a template.
I want the user to be able to insert template variables with button clicks (or drag and drop, doesn't matter).
Getting the cursor position seems to be all I'd need to achieve this.

1 Like
6

Thanks for checking in! We haven't been able to pick this up for the text area yet :disappointed:

7

I'll follow up here if our team picks this up, but it doesn't look like it's on our near term roadmap

8

@Tess do you have any update on this? I'm trying to add some custom text into a TextArea but without knowing the cursor position, I can only append or prepend. I just need to add to the existing text based on the cursor position.

Thanks!

9

Hi @imChamara,

Thanks for checking in! Unfortunately, our team hasn't been able to prioritize this request :disappointed:

10

Hello @imChamara!

I am not sure of your exact setup but would you be able to use a Rich Text Editor instead? It sounds like what ever process you are using to insert at the cursor position will require you to lose focus on the component.

If this is true, then you can access the selection.index property of the Rich Text component during a Blur Event Handler to set the index value to a state variable. This can then be used to perhaps with an additional Focus Event Handler to set the position before you insert your necessary text.

image
image1604×470 62.2 KB