Enabling Text Selection in Compose LazyColumn by selection container

Question

I previously used a WebView to display a long text and style each word based on some business logic. However, I recently transformed this HTML content into a list of sentences and utilized a LazyColumn to present it in my Compose application.

One of the features I cherished in my previous implementation was the ability to select text and utilize the pop-up options for actions like copying or sharing.

I've attempted to wrap my LazyColumn in a SelectionContainer within Jetpack Compose, but it's currently preventing me from selecting text across different items in the list.

I'm curious if there is a way to retain the same text selection behavior in my new Compose structure. Any suggestions or insights would be greatly appreciated.

I have tried these ones so far:

  LazyColumn(
    modifier = Modifier.fillMaxSize(),
    content = {
        items(sentenceList) { index ->
            SelectionContainer {
                Text(
                    text = sentenceList[index]
                )
            }
        }
    }
)

and this:

SelectionContainer {
  LazyColumn(
        modifier = Modifier.fillMaxSize(),
        content = {
            items(sentenceList) { index ->
                    Text(
                        text = sentenceList[index]
                    )
                }
            }
    )
 }

update1:

I should mention that the second option does work, but there's an issue that arises when you try to scroll up and down and then attempt to long-press for text selection again; strangely, it stops working.

I have tried the second option is working fine as you described like copy,share,delete, etc — Chirag Thummar
– Chirag Thummar, Commented Nov 7, 2023 at 12:00
hey @ChiragThummar, thanks for your comment. second option works but I forgot to mention if you try to scroll down and up and then again long press to select, it won't work anymore weirdly. can you confirm this too? — imansdn
– imansdn, Commented Nov 7, 2023 at 12:23
if you want to maintain the text selection then you should use it inside the item block — Chirag Thummar
– Chirag Thummar, Commented Nov 7, 2023 at 12:24
No, I don't want text selection to persist during scrolling. The test scenario is this: try to select the text, then dismiss the popup. Next, scroll down to the end of the list and scroll up again. After that, attempt to select the text once more. it stops working for me. @ChiragThummar — imansdn
– imansdn, Commented Nov 7, 2023 at 12:28

Lovish Puri · Accepted Answer · 2024-12-26 09:50:02Z

1

You need to use a unique key for every item, before using SelectionContainer for individual items. The exception in the first case is due to key, not due to SelectionContainer.

LazyColumn(
    modifier = Modifier.fillMaxSize(),
    content = {
        // id should be unique for each item
        items(sentenceList, key = {it.id}) { index ->
            SelectionContainer {
                Text(
                    text = sentenceList[index]
                )
            }
        }
    }
)

answered Dec 26, 2024 at 9:50

Lovish Puri

217 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Chirag Thummar · Accepted Answer · 2023-11-07 12:44:04Z

-1

I think you may be missing State of LazyColumn. I have tried below code and it works for me.

Try This

@Preview(showBackground = true)
@Composable
 fun TestPreview() {
    LazyColumn(
        state = rememberLazyListState(),
        modifier = Modifier.fillMaxSize(),
        content = {
            items(65) { index ->
                SelectionContainer {
                    Text(
                        text = "I have pasted long text for text selection demo."
                    )
                }
            }
        }
    )

}

answered Nov 7, 2023 at 12:44

Chirag Thummar

3,5283 gold badges22 silver badges31 bronze badges

3 Comments

nick Over a year ago

Sorry, but it doesn't work (compose version 1.8.2). SelectionContainer must be outside the LazyColumn of course. But even if it is, the problem is when you try to select sometimes you can't do it.

Chirag Thummar Over a year ago

There is no compose versions 1.8.2 developer.android.com/jetpack/androidx/releases/compose

nick Over a year ago

yes, mistake about version. But no matter - on last version this solution doesn't work for me. Still trying to find solution...

Collectives™ on Stack Overflow

Enabling Text Selection in Compose LazyColumn by selection container

2 Answers 2

Comments

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related