What is the correct way to show the cursor in an `androidx.compose.material3.OutlinedTextField` ? In...

# compose

[Tobias Preuss]

What is the correct way to show the cursor in an androidx.compose.material3.OutlinedTextField ?
In the following example the cursor is not visible.

@ExperimentalMaterial3Api
@Composable
fun outlinedTextColors() = outlinedTextFieldColors(
    textColor = baseTextColor(),
    cursorColor = colorResource(android.R.color.holo_green_dark), // <---
    unfocusedBorderColor = baseTextColor(),
    unfocusedLabelColor = baseTextColor(),
    focusedLabelColor = baseTextColor(),
    placeholderColor = colorResource(R.color.tertiaryTextColor),
    focusedTrailingIconColor = baseIconColor(),
)


@ExperimentalMaterial3Api
@Composable
private fun MyOutlinedTextField(
    configuration: Configuration,
    onTextChanged: (String) -> Unit,
    modifier: Modifier = Modifier,
) {
    OutlinedTextField(
        modifier = modifier,
        label = { Text(configuration.label, subheadlineMedium) },
        value = limitedText,
        onValueChange = { onTextChanged(it) },
        textStyle = subheadlineMedium,
        colors = outlinedTextColors(), // <---
        singleLine = true,
        keyboardOptions = KeyboardOptions(keyboardType = KeyboardType.Text, imeAction = ImeAction.Done)
    )
}

Related:
• https://github.com/material-components/material-components-android/issues/3067
• https://issuetracker.google.com/issues/240256666

[Tobias Preuss]

@Ale Stamato Any hint here?

[Ale Stamato]

Hey. Are you running latest compose UI stable and M3 or which versions?

[Tobias Preuss]

1.3.2 and M3

[Ale Stamato]

Cant find anything wrong with that snippet. So cursor is transparent? i assume you tried removing style subheadlineMedium? does your component work isolated in a preview? have you tried hardcoding a cursor color like

colors = TextFieldDefaults.outlinedTextFieldColors(
            cursorColor = Color(Pink)
        ),

do u have a min repro (a small project)? I cant reproduce, locally cursorColor works fine for me (using the same system green)

[Tobias Preuss]

Yes, I tried setting the cursorColor explicitly.

[Tobias Preuss]

I will double check on the style, although I think I did. I will also try to set a background color to see if the cursor is transparent it white.

[Tobias Preuss]

If I remove even more ...

@ExperimentalMaterial3Api
@Composable
private fun MyOutlinedTextField(
    configuration: Configuration,
    onTextChanged: (String) -> Unit,
    modifier: Modifier = Modifier,
) {
    androidx.compose.material3.OutlinedTextField(
        modifier = modifier,
        value = limitedText,
        onValueChange = { onTextChanged(it) },
        singleLine = true,
        keyboardOptions = KeyboardOptions(keyboardType = KeyboardType.Text, imeAction = ImeAction.Done)
    )
}

... the cursor still does not show up on the device.
It does show up in the Android Studio Preview, though: purple color.
Hardcoding the color works in the Preview, too. But not on the device.

[Tobias Preuss]

Does the OutlinedTextField pick up some theme automatically which colors the cursor? How would I know?

[Ale Stamato]

just to be clear, when you say “on the device”, youre running the preview composable on the device or the app on the device

[Tobias Preuss]

the app

[Ale Stamato]

take a look at the outlinedTextFieldColors defaults ->

cursorColor: Color = OutlinedTextFieldTokens.CaretColor.toColor()

and then OutlinedTextFieldTokens defines CaretColor = ColorSchemeKeyTokens.Primary
if you do not override it, the cursor colour should be the primary defined in your material theme

[Tobias Preuss]

Are you referring to colorPrimary?

<style name="AppTheme" parent="Theme.MaterialComponents.DayNight">
    <item name="colorPrimary">#000</item>
    ...
</style>

[Ale Stamato]

I am referring to your Compose material theme config, like:

MaterialTheme(
    colorScheme = colorScheme,
    typography = AppTypography,
    content = content
)

then colorScheme has a primary.

[Tobias Preuss]

Is setting a MaterialTheme a requirement?

[Ale Stamato]

well, you can manually set styles across the app with composition locals or using style parameters, but it is easier and more consistent with a theme (like xml for views)

[Tobias Preuss]

I can try to wrap the OutlinedTextField into MaterialTheme which I do not until now.

[Tobias Preuss]

The alternative is to set the textStyle in combination with a composition local if I understand you correctly.

[Ale Stamato]

you can try with the material theme, but not sure any of this will work if setting the colour directly didn’t 😕 i think i need to see the rest of the code.

[Tobias Preuss]

✅ Rubberducking with colleagues helped 🦆 I had animations turned off (for a while) in developer options 🤦 Thanks anyway!