If there are other @Composable below the TextField, the `imePadding` doesn't seem to pop up with the...

# compose

[Nthily]

If there are other @Composable below the TextField, the imePadding doesn't seem to pop up with the TextField(It will have extra padding underneath) 🤔🧵.

2.mp4

[Nthily]

Column {
  Box(
    Modifier.fillMaxWidth().height(56.dp).background(Color.Gray)
  ) {
    Text("Top bar")
  }
  LazyColumn(
    modifier = Modifier.weight(1f)
  ) {
    items(100) {
      Box(
        Modifier
          .fillMaxWidth()
          .height(56.dp)
      ) {
        Text(text = "IT $it")
      }
    }
  }
  BasicTextField(
    state = rememberTextFieldState(),
    modifier = Modifier.imePadding().fillMaxWidth().background(Color.Cyan),
    decorator = {
      Box(Modifier.padding(24.dp)) {
        it()
      }
    }
  )
  Box(
    Modifier.fillMaxWidth().height(56.dp).background(Color.Gray)
  ) {
    Text("Bottom bar")
  }
}

Here is the simplest reproduction of the code, I know if I put the imePadding in the Column it will work fine, but it will pop up with the bottomBar, is there a way to do this if I just want the TextField to pop up with the ime?

[Nthily]

1.mp4

1.mp4

[Halil Ozercan]

please file a bug

[Halil Ozercan]

and it'd be great if you can test the same scenario with the new BTF(TextFieldState)

[Nthily]

😯 oh is it a bug of BTF?

> and it'd be great if you can test the same scenario with the new BTF(TextFieldState)
Actually I'm just used TextFieldState to test it,

BasicTextField(
    state = rememberTextFieldState()

but It doesn't seem to have anything to do with BTF? 🤔 I've also tested onValueChange of BTF and it has the same behavior, but havent test for Textfield for md3, etc

[Nthily]

https://issuetracker.google.com/issues/342699235

@Halil Ozercan Not sure if this is a bug, but just submitted it to issueTracker 🙂

[Halil Ozercan]

What is the soft input adjustment method are you using within your activity?

[Nthily]

adjustResize and enabled endbleEdgeToEdge

[Halil Ozercan]

I believe you need to use consumeWindowInsets modifier to let your layout know that your bottom bar is supposed to take some of the ime padding and the rest should be handled by the imePadding modifier.

[Halil Ozercan]

Column(Modifier.consumeWindowInsets(PaddingValues(vertical = 56.dp))) {
    Box(
        Modifier
            .fillMaxWidth()
            .height(56.dp)
            .background(Color.Gray)
    ) {
        Text("Top bar")
    }
    LazyColumn(
        modifier = Modifier.weight(1f)
    ) {
        items(100) {
            Box(
                Modifier
                    .fillMaxWidth()
                    .height(56.dp)
            ) {
                Text(text = "IT $it")
            }
        }
    }
    var value by remember { mutableStateOf("") }
    TextField(
        value = value,
        onValueChange = { value = it },
        modifier = Modifier
            .imePadding()
            .fillMaxWidth()
            .background(Color.Cyan),
    )
    Box(
        Modifier
            .fillMaxWidth()
            .height(56.dp)
            .background(Color.Red)
    ) {
        Text("Bottom bar")
    }
}

[Halil Ozercan]

I tested with regular TextField but it should be same for BTF2

[Nthily]

it works for me ! thanks 🥹

[Nthily]

Although I've read the documentation for this before, I'm not sure what the documentation says, so I don't know what I can do with it

[Nthily]

thanks Halil !!! ❤️

[Halil Ozercan]

Yeah the documentation can get a bit cryptic around this area. A sample similar to yours could be helpful

[Halil Ozercan]

cc; @Alex Vanyo

[Nthily]

I can submit a pull request about this demo video and code sample to website if its possible 😆