How to select text via native OS?

Ionic Framework Ionic Vue
1

So we have a chat app.
The user wants to select a text, and copy the message, or just a word, or part of the word (just when he types in the input or textarea).

But it is not possible apparently to select text inside div or , as someone said, Ionic captures that event or something like that…

How to make it work?

UPD:

I found a solution on the web, we need to create a css class .selectable and attach it to the element we want to select… ( user-select: text).

But now the problem is - I can select text, but I cannot dismiss it by tapping anywhere outside that… how to do that?

2

In our Vue app to copy text from a chat message, we copy the entire message using onLongPress from VueUse.

const messageTextRef = ref<HTMLElement | null>(null)

onLongPress(messageTextRef, () => {
    emit('messageLongPressed', props.message)
})

Then the parent messages component shows a little modal sheet with a copy button where we use @capacitor/clipboard.

I guess this a little different from what you are trying to do. You are trying to copy the actual HTML text. For that, we do the same by adding the user-select: text style and just rely on the native OS copy/paste functionality.

1 Like
3

Thank you for replying (again!)
Yes, I am aware about @capacitor/clipboard it is just that its not working for our case.
We need to be able to select the text via native OS functionality, which user-select: text achieves - but the problem is that - we can select, but we cannot deselect it then, by tapping anywhere outside that selected area.

Do you have the same issue? If so, how did you fix it or maybe any clue as to how it can be fixed potentially?

4

On Android where we are using user-select: text and relying on native OS copy/paste, to deselect, I tap the selected text. Tapping anywhere else doesn’t deselect. That took me a sec to figure out :sweat_smile: Obviously, hitting Copy or one of the other native options auto deselects the text.

I don’t have an iOS device to test on.

1 Like