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.
Actual behavior: Demo of source code below (after Compose BOM 2024.08.00)
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
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)
Actual behavior: Demo of source code below (after Compose BOM 2024.08.00)
Source code:
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