Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to hide the keyboard in dialog with compose

Im building my view using BasicTextField inside Dialog, when i wanna close the keyboard by ImeAction.Done but it doesn't work. I have tried to hide the keyboard with:

val keyboardController = LocalSoftwareKeyboardController.current
keyboardController?.hide()

or

val focusManager = LocalFocusManager.current
focusManager.clearFocus()

but it's not working. Anyone have a solution to help me with that case?

My code:

@Composable
fun DialogEditNickNameView(){
    val name = remember { mutableStateOf("") }
    val keyboardController = LocalSoftwareKeyboardController.current
    

    Dialog(onDismissRequest = { }) {
        Column(
            modifier = Modifier
                .background(color = Color.White, shape = RoundedCornerShape(16.dp))
                .padding(vertical = 24.dp, horizontal = 16.dp),
            horizontalAlignment = Alignment.CenterHorizontally
        ) {
            Text(
                text = "Edit name",
                style = TextStyle(
                    fontFamily = robotoFamily,
                    fontWeight = FontWeight.Medium,
                    fontSize = 16.sp,
                    lineHeight = 24.sp,
                    color = colorResource(id = R.color.text_color)
                ),
            )

            Row(
                modifier = Modifier.padding(vertical = 16.dp)
            ) {
                BasicTextField(
                    value = name.value,
                    onValueChange = {
                        name.value = it
                    },
                    modifier = Modifier.fillMaxWidth(0.7f),
                    keyboardOptions = KeyboardOptions(
                        keyboardType = KeyboardType.Text,
                        imeAction = ImeAction.Done
                    ),
                    keyboardActions = KeyboardActions(onDone = {
                        keyboardController?.hide()
                    }),
                    singleLine = true,
                    textStyle = TextStyle(
                        fontFamily = robotoFamily,
                        fontWeight = FontWeight.Normal,
                        fontSize = 16.sp,
                        lineHeight = 24.sp,
                        color = colorResource(id = R.color.text_color)
                    ),
                )

                Spacer(modifier = Modifier.width(26.dp))

                Image(
                    painter = painterResource(id = R.drawable.ic_close_circle),
                    contentDescription = null,
                    modifier = Modifier.clickable { name.value = "" }
                )
            }
         }
}
like image 379
AnTran Avatar asked Sep 19 '25 20:09

AnTran


1 Answers

The Dialog has its own LocalSoftwareKeyboardController.
Just move the code inside the Dialog:

Dialog(onDismissRequest = { }) {

    val keyboardController = LocalSoftwareKeyboardController.current

    //...Column

}
like image 182
Gabriele Mariotti Avatar answered Sep 21 '25 12:09

Gabriele Mariotti