I'm using material3 and having trouble maintaining the single line format. When using a placeholder,...

# compose

[Christopher Mederos]

I'm using material3 and having trouble maintaining the single line format. When using a placeholder, suffix, and label - the animation of the label moving from inside to on top of the textfield briefly causes it to render as multiline.

Is there a way to prevent this using some combination of modifiers / similar? thanks for the help!

[Christopher Mederos]

OutlinedTextField(
        value = value,
        onValueChange = onValueChange,
        label = { Text(text = label) },
        suffix = { Text(text = inputSuffix) },
        placeholder = { Text(text = placeHolder) },
        modifier = Modifier.widthIn(max = 100.dp),
        singleLine = true,
        keyboardOptions = KeyboardOptions(
            keyboardType = KeyboardType.Number,
            imeAction = imeAction
        ),
        keyboardActions = keyboardActions,
    )

[Sean Proctor]

Do you have a reproduction of that? It doesn't look normal. I would guess that the way the width is constrained is causing the issue. You could try setting maxLines = 1 on the text in the label, suffix, and placeholder. if it's M3, the height is supposed to be 56 DP, so you could just set that if everything else fails.

[Christopher Mederos]

ahh good call - adding maxLines to the Text composable for the label fixed it

label = { Text(text = "Label", maxLines = 1) }

In that case, seems like the singleLine parameter in the OutlinedTextField composable only applies to the value itself (not the label, suffix, etc.)

[Sean Proctor]

There's no composition local for maxLines. You need to set that in the Text. It's weird that the width of the label is shorter during animation than at the start or end. It might be a bug.

[Christopher Mederos]

it's weird that the width of the label is shorter during animation

yea... I think it happens because the suffix inside the textfield takes up some of the width (whereas when the label is on the outline, it can take the full width)