I want to set focus to an OutlinedTextField, programmatically, and I want the software keyboard to appear.

But what I get is that when I set the focus to the OutlinedTextField, the software keyboard does not appear. And I found out that this happens even if I move the focus with the PC cursor keys.

(I have to note that a number of kludges have been proposed, including a 200ms delay, but it seems none of them works with API>=33 and SDK 35. Jetpack Compose OutlinedTextField gets focus but, no keyboard show up proposes delay(200), and How to move focus from one component to another in Jetpack compose? proposes scope.launch)

MRE app:

class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        enableEdgeToEdge()
        setContent {
            OutlinedTextFieldMreTheme {
                Scaffold(modifier = Modifier.fillMaxSize()) { innerPadding ->
                    MainStuff(
                        modifier = Modifier.padding(innerPadding)
                    )
                }
            }
        }
    }
}

@Composable
fun MainStuff(modifier: Modifier = Modifier) {
    var myText by rememberSaveable { mutableStateOf("") }
    val myFocusRequester = remember { FocusRequester() }
    var color by remember { mutableStateOf(Green) }

    Surface(modifier = modifier) {
        Column {
            OutlinedTextField(
                modifier = Modifier
                    // can comment out or uncomment `focusRequester`, it does not matter
                    .focusRequester(myFocusRequester)
                    .onFocusChanged { color = if (it.isFocused) Red else Green }
                    .focusable(), // <== !!! the problem is here, see the answer
                value = myText,
                onValueChange = { myText = it },
            )
            Text(
                text = "some text",
                color = color,
            )
            Button(
                onClick = {}
            ) {
                Text("first button")
            }
            Button(
                onClick = { myFocusRequester.requestFocus() }
            ) {
                Text("second button")
            }
        }
    }
}

But I get a strange result:

When the software keyboard is shown, the OutlinedTextField reportedly has no focus ("some text" is green, the left screenshot); after I move the focus with the PC cursor keys (the middle screenshot), the OutlinedTextField reportedly gets focus ("some text" is red, the right screenshot), but no software keyboard is shown. To get the software keyboard, I have to tap in the input area.

I want to set focus to an OutlinedTextField, programmatically, and I want the software keyboard to appear.

But what I get is that when I set the focus to the OutlinedTextField, the software keyboard does not appear. And I found out that this happens even if I move the focus with the PC cursor keys.

(I have to note that a number of kludges have been proposed, including a 200ms delay, but it seems none of them works with API>=33 and SDK 35. Jetpack Compose OutlinedTextField gets focus but, no keyboard show up proposes delay(200), and How to move focus from one component to another in Jetpack compose? proposes scope.launch)

MRE app:

class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        enableEdgeToEdge()
        setContent {
            OutlinedTextFieldMreTheme {
                Scaffold(modifier = Modifier.fillMaxSize()) { innerPadding ->
                    MainStuff(
                        modifier = Modifier.padding(innerPadding)
                    )
                }
            }
        }
    }
}

@Composable
fun MainStuff(modifier: Modifier = Modifier) {
    var myText by rememberSaveable { mutableStateOf("") }
    val myFocusRequester = remember { FocusRequester() }
    var color by remember { mutableStateOf(Green) }

    Surface(modifier = modifier) {
        Column {
            OutlinedTextField(
                modifier = Modifier
                    // can comment out or uncomment `focusRequester`, it does not matter
                    .focusRequester(myFocusRequester)
                    .onFocusChanged { color = if (it.isFocused) Red else Green }
                    .focusable(), // <== !!! the problem is here, see the answer
                value = myText,
                onValueChange = { myText = it },
            )
            Text(
                text = "some text",
                color = color,
            )
            Button(
                onClick = {}
            ) {
                Text("first button")
            }
            Button(
                onClick = { myFocusRequester.requestFocus() }
            ) {
                Text("second button")
            }
        }
    }
}

But I get a strange result:

When the software keyboard is shown, the OutlinedTextField reportedly has no focus ("some text" is green, the left screenshot); after I move the focus with the PC cursor keys (the middle screenshot), the OutlinedTextField reportedly gets focus ("some text" is red, the right screenshot), but no software keyboard is shown. To get the software keyboard, I have to tap in the input area.

• android-jetpack-compose
• android-compose-textfield

Share Improve this question Follow edited Mar 20 at 22:47 Ken White 126k1515 gold badges236236 silver badges466466 bronze badges asked Mar 20 at 22:46 1844674407370955161518446744073709551615 16.9k44 gold badges101101 silver badges132132 bronze badges

Add a comment  | 

1 Answer 1

Sorted by: Reset to default 0

The solution is to remove .focusable(): OutlinedTextField already is focusable, and one more .focusable() breaks it (which is rather counter-intuitive for an adjective such as "focusable").