How to close the virtual keyboard from a Jetpack Compose TextField?

Question

I'm using the Jetpack Compose TextField and I want to close the virtual keyboard when the user press the the action button (imeActionPerformed parameter).

val text = +state { "" }
TextField(
    value = text.value,
    keyboardType = KeyboardType.Text,
    imeAction = ImeAction.Done,
    onImeActionPerformed = { 
        // TODO Close the virtual keyboard here <<<
    }
    onValueChange = { s -> text.value = s }
)

Gabriele Mariotti · Answer 1 · 2021-05-20T21:43:23.700

22

With the 1.0.0 (tested with 1.0.0-beta07) you can use the LocalSoftwareKeyboardController class:

var text by remember { mutableStateOf(TextFieldValue("Text")) }
val keyboardController = LocalSoftwareKeyboardController.current

TextField(
        value = text,
        onValueChange = {
            text = it
        },
        label = { Text("Label") },
        keyboardOptions = KeyboardOptions(imeAction = ImeAction.Done),
        keyboardActions = KeyboardActions(
                onDone = {keyboardController?.hide()})
)

edited May 20 '21 at 21:43

answered Sep 01 '20 at 22:03

Gabriele Mariotti

192,671
57
469
489

2

This is every Android Developer's dream – Andrew Chelix Apr 14 '21 at 10:29
Getting this error: `Unresolved reference: hide` – Harry Apr 17 '21 at 07:19
`hideSoftwareKeyboard` instead of `hide` worked for me. – Harry Apr 17 '21 at 07:24
1

@Harry As described in the answer it requires 1.0.0-beta04. `hideSoftwareKeyboard` was [**renamed** in beta04 to `hide()`](https://developer.android.com/jetpack/androidx/releases/compose-ui#1.0.0-beta04) – Gabriele Mariotti Apr 17 '21 at 08:26
1

Oh, thanks. I thought I have updated the Compose – Harry Apr 17 '21 at 16:35
What are the differences between this and the focusManager approach (https://stackoverflow.com/a/66259111/2911458)? When should we use each? – stkent May 22 '21 at 23:10

azizbekian · Accepted Answer · 2021-03-27T14:07:51.283

As of compose version 1.0.0-alpha12 (valid in beta02) the onImeActionPerformed is deprecated and suggested approach is to use keyboardActions with combination of keyboardOptions:

    val focusManager = LocalFocusManager.current

    OutlinedTextField(
        value = ...,
        onValueChange = ...,
        label = ...,
        keyboardActions = KeyboardActions(onDone = { focusManager.clearFocus() }),
        keyboardOptions = KeyboardOptions.Default.copy(imeAction = ImeAction.Done, keyboardType = KeyboardType.Password),
    )

focusManager.clearFocus() will take care of dismissing the soft keyboard.

nglauber · Answer 3 · 2021-02-21T17:10:19.103

Edit after alpha-12 release: See @azizbekian response.

Pre-alpha-12 response

I found the solution here :)

fun hideKeyboard(activity: Activity) {
    val imm: InputMethodManager = activity.getSystemService(Activity.INPUT_METHOD_SERVICE) as InputMethodManager
    var view = activity.currentFocus
    if (view == null) {
        view = View(activity)
    }
    imm.hideSoftInputFromWindow(view.windowToken, 0)
}

I just need to call the function above from my component:

// getting the context
val context = +ambient(ContextAmbient)

// textfield state
val text = +state { "" }

TextField(
    value = text.value,
    keyboardType = KeyboardType.Text,
    imeAction = ImeAction.Done,
    onImeActionPerformed = { 
        if (imeAction == ImeAction.Done) {
            hideKeyboard(context as Activity)
        }
    }
    onValueChange = { s -> text.value = s }
)

How to close the virtual keyboard from a Jetpack Compose TextField?

3 Answers3