Jetpack Compose TextField: Manually Requesting Focus

The official documentation states that to manually request focus on a textfield as a response to user interaction, you use this code:

val focusRequester = remember { FocusRequester() }
var text by remember { mutableStateOf("") }

TextField(
    value = text,
    onValueChange = { text = it },
    modifier = Modifier.focusRequester(focusRequester)
)

Button(onClick = { focusRequester.requestFocus() }) {
    Text("Request focus on TextField")
}

Well, I ran into an issue where the text field wasn’t receiving focus using the above code, and, therefore, the soft keyboard wasn’t showing up. Hours of stackoverflowing and googling the issue only dug up solutions for other people who wanted to auto-focus on a text field on initial screen load. That’s a different use case from my requirement.

My use case was quite similar to what the official documentation above indicated, but with a slight twist: I set up the screen’s root Column composable with a clickable modifier, which uses the FocusManager object to clear focus from the input field, thus dismissing the soft keyboard, when tapped:

...
val focusManager = LocalFocusManager.current
...
Column(
    modifier = Modifier
        .clickable {
            focusManager.clearFocus()
        }
) {...}

Reading further in the official documentation page I did a double-take on the Capture and release focus section and got the idea to first call focusRequester.freeFocus() before calling focusRequester.requestFocus().

Here’s what I ended up doing:

Button(onClick = { 
    focusRequester.freeFocus() 
    focusRequester.requestFocus() 
}) {
    Text("Request focus on TextField")
}

Et voila! It worked: the text field was now getting focus and the soft keyboard now showing up when the button is clicked.

Ugo

Full stack polyglot software developer

Tweet Share