compose-multiplatform icon indicating copy to clipboard operation
compose-multiplatform copied to clipboard

BasicTextField and BasicText cannot select styled ranges from annotated string

Open b-camphart opened this issue 3 years ago • 2 comments

Summary

When using a BasicTextField, if the supplied AnnotatedString contains a SpanStyle that does not cover the entire text and the TextFieldValue has a selection that starts within the SpanStyle range and ends outside it, the application stops rendering.

Code to reproduce

fun main() = application {
    Window(onCloseRequest = ::exitApplication) {

        // "abcd", 'b' will be bold, 'bc' will be selected
        val (value, setValue) = remember { mutableStateOf(TextFieldValue(AnnotatedString("abcd", spanStyles = listOf(
            AnnotatedString.Range(SpanStyle(fontWeight = FontWeight.Bold), 1, 2)
        )), selection = TextRange(1, 3))) }

        BasicTextField(
            value = value,
            onValueChange = setValue,
        )
    }
}

Result

The application opens and the window can still be moved, but the window is black. If this is done after the application has been running, all future rendering will stop, but composition logic is still being performed.

Environment

  • Gradle plugins:
    • kotlin("multiplatform") version "1.6.10"
    • id("org.jetbrains.compose") version "1.1.1"
  • Machine:
    • Window 10 home
    • Intel(R) Core(TM) i7-7700HQ CPU
    • NVIDIA 1050

b-camphart avatar Jun 21 '22 20:06 b-camphart

Additional notes:

  • If the supplied SpanStyle has no actual properties, the issue does not happen.
  • Using italics instead of bold also causes the problem.

b-camphart avatar Jun 21 '22 20:06 b-camphart

Additionally, this applies to the BasicText component too. If you run the following test:

@Composable
fun TextFieldTest() {

    val value = AnnotatedString(
        "abcd", spanStyles = listOf(
            AnnotatedString.Range(SpanStyle(fontWeight = FontWeight.Bold), 1, 2)
        )
    )

    SelectionContainer {
        BasicText(text = value)
    }

}

fun main() {
    singleWindowApplication {
        TextFieldTest()
    }
}

You will be unable to select the bolded text and, if you try, the selection no longer responds appropriately.

b-camphart avatar Jul 05 '22 19:07 b-camphart

Maybe related to this compose issue: https://issuetracker.google.com/issues/135556699

noe avatar May 10 '23 13:05 noe