Keyboard appearing in front of BasicTextField

Question

I have this problem in Jetpack Compose, the keyboard appears in front of my BasicTextField and does not allow me to see what the user is typing. I've already tried adjustResize, adjustPan and others and they still don't solve my problem. I found a solution that you can see below, but it seems too much and the first time it doesn't work very well, because the field only goes up a second or two after I open the keyboard - maybe it's from the emulator - but from there, it works right every time.

I leave my code below. Thanks in advance.

import android.view.ViewTreeObserver
import androidx.compose.foundation.ExperimentalFoundationApi
import androidx.compose.foundation.Image
import androidx.compose.foundation.background
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.Row
import androidx.compose.foundation.layout.height
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.layout.width
import androidx.compose.foundation.relocation.BringIntoViewRequester
import androidx.compose.foundation.relocation.bringIntoViewRequester
import androidx.compose.foundation.shape.RoundedCornerShape
import androidx.compose.foundation.text.BasicTextField
import androidx.compose.material.Text
import androidx.compose.runtime.Composable
import androidx.compose.runtime.DisposableEffect
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.remember
import androidx.compose.runtime.rememberCoroutineScope
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.platform.LocalView
import androidx.compose.ui.res.painterResource
import androidx.compose.ui.res.stringResource
import androidx.compose.ui.text.input.TextFieldValue
import androidx.compose.ui.tooling.preview.Preview
import io.nst.cj.R
import io.nst.cj.app.theme.Dimen10
import io.nst.cj.app.theme.Dimen13
import io.nst.cj.app.theme.Dimen20
import io.nst.cj.app.theme.Dimen30
import io.nst.cj.app.theme.Dimen320
import io.nst.cj.app.theme.Dimen45
import io.nst.cj.app.theme.TextStyle18Normal
import kotlinx.coroutines.launch

@ExperimentalFoundationApi
@Preview
@Composable
fun SearchTextField() {
    val state = remember { mutableStateOf(TextFieldValue("")) }
    val bringIntoViewRequester = remember { BringIntoViewRequester() }
    val scope = rememberCoroutineScope()
    val view = LocalView.current
    DisposableEffect(view) {
        val listener = ViewTreeObserver.OnGlobalLayoutListener {
            scope.launch { bringIntoViewRequester.bringIntoView() }
        }
        view.viewTreeObserver.addOnGlobalLayoutListener(listener)
        onDispose { view.viewTreeObserver.removeOnGlobalLayoutListener(listener) }
    }

    BasicTextField(
        modifier = Modifier
            .width(Dimen320)
            .height(Dimen45)
            .background(Color.White, RoundedCornerShape(Dimen13))
            .bringIntoViewRequester(bringIntoViewRequester),
        value = state.value,
        onValueChange = { value -> state.value = value },
        singleLine = true,
        textStyle = TextStyle18Normal,
        decorationBox = { innerTextField ->
            Row(verticalAlignment = Alignment.CenterVertically) {
                Box(
                    Modifier
                        .weight(1f)
                        .padding(start = Dimen30)) {
                    if (state.value.text.isEmpty()) {
                        Text(
                            text = stringResource(id = R.string.search),
                            style = TextStyle18Normal
                        )
                    }

                    innerTextField()
                }

                val trailingIcon = @Composable {
                    Image(
                        painter = painterResource(id = R.drawable.ic_search),
                        contentDescription = "",
                        modifier = Modifier.padding(
                            end = Dimen20,
                            top = Dimen13,
                            bottom = Dimen13,
                            start = Dimen10
                        )
                    )
                }

                trailingIcon()
            }
        }
    )
}

Keyboard appearing in front of BasicTextField

Answers (1)

Related Questions