Compose BasicTextField trailingIcon stretches the heigh of the field

Question

I ran into an issue today where if I specify a trailing icon for a BasicTextField it forces the height of the field to be increased. Any way to override this setting? As you can see in the image the 555g field is shorter than the Ingredient1 which became taller due to the addition of the trailingIcon.

I've tried to understand what's happening in compose and after digging I came across this code in the Google native TextField.kt

if (trailing != null) {
    Box(
        modifier = Modifier
            .layoutId(LeadingId)
            .then(IconDefaultSizeModifier),
        contentAlignment = Alignment.Center
    ) {
        trailing()
    }
}

So I am inferring from this that IconDefaultSizeModifier is forcing the minHeight to be 48.dp

and below is the code that I use to create the BasicTextField

BasicTextField(
    value = state,
    //... more arguments
    decorationBox = @Composable {
        TextFieldDefaults.OutlinedTextFieldDecorationBox(
            value = textVal,
            visualTransformation = VisualTransformation.None,
            innerTextField = it,
            singleLine = singleLine,
            enabled = enabled,
            interactionSource = interactionSource,
            trailingIcon = trailingIcon,
            // keep vertical paddings but change the horizontal
            contentPadding = TextFieldDefaults.textFieldWithoutLabelPadding(
                top = 10.dp,
                bottom = 10.dp,
                start = 12.dp,
                end = 8.dp
            ),
            container = {}
          )
    }
)

Gabriele Mariotti · Answer 1 · 2022-12-05T16:06:19.123

0

You can apply the same height to both TextFields.

Something like:

 BasicTextField(
     modifier = Modifier.height(48.dp),

In the same way you can reduce the height.For example

 BasicTextField(
     modifier = Modifier.height(32.dp),
     //... more arguments
     decorationBox = @Composable {
         TextFieldDefaults.OutlinedTextFieldDecorationBox(
             contentPadding = TextFieldDefaults.textFieldWithoutLabelPadding(
                 top = 0.dp,
                 bottom = 10.dp,
                 start = 12.dp,
                 end = 0.dp
             ),

edited Dec 05 '22 at 16:06

answered Dec 05 '22 at 14:45

Gabriele Mariotti

320,139
94
887
841

I could do it, but I want to reduce the height to fit more lines.... – David Aleksanyan Dec 05 '22 at 14:55
@DavidA you can reduce the height in the same way. – Gabriele Mariotti Dec 05 '22 at 16:06
I could do that and it would work but I forgot to mention that I want the text box to wrap text in case of overflow, if I set a fixed height, it no longer wraps text – David Aleksanyan Dec 05 '22 at 17:36
@DavidA In this case you can use the `heightIn` modifier or you can use a workaround to add a `trailingIcon` with a `Transparent` tint to the 1st `TextField`. – Gabriele Mariotti Dec 05 '22 at 19:07
Just tried the `heightIn` modifier but it seems to work just like fixed height, if I specify `min` argument it doesn't do anything, if I specify `max` argument it acts like regular `height` – David Aleksanyan Dec 05 '22 at 21:15
I'm still interested in this question but with somewhat less urgency, I found a workaround: a bit ugly though, I'm overlaying an icon on top of the `TextField` with a higher Z index – David Aleksanyan Dec 05 '22 at 21:38

Compose BasicTextField trailingIcon stretches the heigh of the field

1 Answers1