If there are other @Composable below the TextField...
# compose
n
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) 🤔🧵.
Copy code
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
?
1.mp4
h
please file a bug
and it'd be great if you can test the same scenario with the new BTF(TextFieldState)
n
😯 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,
Copy code
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
https://issuetracker.google.com/issues/342699235 @Halil Ozercan Not sure if this is a bug, but just submitted it to issueTracker 🙂
h
What is the soft input adjustment method are you using within your activity?
n
adjustResize and enabled
endbleEdgeToEdge
h
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.
❤️ 1
Copy code
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")
    }
}
I tested with regular TextField but it should be same for BTF2
n
it works for me ! thanks 🥹
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
thanks Halil !!! ❤️
h
Yeah the documentation can get a bit cryptic around this area. A sample similar to yours could be helpful
cc; @Alex Vanyo
n
I can submit a pull request about this demo video and code sample to website if its possible 😆