material-components / material-components-android

Modular and customizable Material Design UI components for Android
Apache License 2.0
16.41k stars 3.08k forks source link

[ModalBottomSheet] breaks text colors inside of AndroidView as of BOM 2024.08.00 #4372

Closed jeffreyfhow23 closed 1 week ago

jeffreyfhow23 commented 2 weeks ago

Description: After updating to Compose BOM 2024.08.00 or later, when I have an AndroidView inside of a ModalBottomSheet, the text colors inside the AndroidView are wrong.

Expected behavior: Demo of source code below (before Compose BOM 2024.08.00)

Screenshot 2024-11-08 at 11 47 13 AM

Actual behavior: Demo of source code below (after Compose BOM 2024.08.00)

Screenshot 2024-11-08 at 1 01 10 PM

Source code:

 * This Preview demonstrates that the text colors of text items in a AndroidView that's nested
 * inside a ModalBottomSheet breaks as of Compose BOM 2024.08.00 or later. Previous to this version
 * of the Compose BOM, there we no issues with text colors.
 */
@OptIn(ExperimentalMaterial3Api::class)
@Preview(widthDp = 380, backgroundColor = 0xF2F5F7, showBackground = true)
@Composable
private fun TestHtmlText_InBottomSheet_Preview() {
    val bottomSheetState = rememberModalBottomSheetState(skipPartiallyExpanded = true)
    ModalBottomSheet(
        modifier = Modifier.fillMaxWidth().heightIn(min = 200.dp),
        dragHandle = null,
        sheetState = bottomSheetState,
        shape = RoundedCornerShape(topStart = 4.dp, topEnd = 4.dp),
        onDismissRequest = {  }
    ) {
        Column {
            TestHtmlText(text = "This is a <a href=\"tel:+15555555555\">telephone number</a>")
            TestHtmlText(text = "This is a <a href=\"https://www.google.com\">link</a>")
            TestNumberPicker()
        }
    }
}

/**
 * This Preview demonstrates that the text colors seem to work correctly when not nested inside
 * of a ModalBottomSheet
 */
@Preview(widthDp = 380, backgroundColor = 0xF2F5F7, showBackground = true)
@Composable
private fun TestHtmlText_Preview() {
    Column {
        TestHtmlText(text = "This is a <a href=\"tel:+15555555555\">telephone number</a>")
        TestHtmlText(text = "This is a <a href=\"https://www.google.com\">link</a>")
        TestNumberPicker()
    }
}

@Composable
private fun TestHtmlText(
    text: String,
    modifier: Modifier = Modifier,
    importantForAccessibility: Int = IMPORTANT_FOR_ACCESSIBILITY_YES,
    defStyleRes: Int = 0,
    textGravity: Int? = null,
    htmlFlag: Int = HtmlCompat.FROM_HTML_MODE_COMPACT,
    movementMethod: MovementMethod? = LinkMovementMethod.getInstance(),
    htmlTextFormatter: (CharSequence) -> CharSequence = { it }
) {
    // Remembers the HTML formatted description. Re-executes on a new description
    val htmlDescription = remember(text) {
        HtmlCompat.fromHtml(text, htmlFlag)
    }

    // Displays the TextView on the screen and updates with the HTML description when inflated
    // Updates to htmlDescription will make AndroidView recompose and update the text
    AndroidView(
        modifier = modifier,
        factory = { context ->
            TextView(context, null, 0, defStyleRes).apply {
                this.movementMethod = movementMethod
                this.importantForAccessibility = importantForAccessibility
                this.linksClickable = true
                textGravity?.let { this.gravity = textGravity }
            }
        },
        update = { it.text = htmlTextFormatter(htmlDescription) }
    )
}

@Composable
private fun TestNumberPicker() {
    AndroidView(
        modifier = Modifier
            .wrapContentSize()
            .padding(end = 8.dp),
        factory = { context ->
            NumberPicker(context).apply {
                minValue = 0
                maxValue = 9
            }
        },
    )
}

Minimal sample app repro: Run Preview in source code above

Android API version: 32

Material Library version: Compose BOM 2024.08.00 or later, which uses Material3 1.3.0

Device: Pixel 4 emulator

imhappi commented 1 week ago

Hello, this repo is for the Material Android library for Views. For Material Compose issues, please file at https://issuetracker.google.com/issues/new?component=742043&template=1346811