Jetpack Compose TextField capture keyboard Enter-input

Question

From what I understand, there is an API for the Jetpack Compose Textfield for capturing Keyboard actions but I don't know what of this APIs that can capture the Enter-Input

The use-case of this capturing enter input is to enable to click Enter and try to go to the next TextField and keeping while keeping the keyboard open

OutlinedTextField(
    value = username.value,
    onValueChange = {
        username.value = it
        },
    keyboardActions = KeyboardActions(
        onDone = {},
        onGo = {},
        onNext = {},
        onPrevious ={},
        onSearch ={},
        onSend = {}
        )
)

Additional question: I can't seem to have a physical keyboard do an IME action. I need it to run my onDone / onSubmit after a physical keyboard presses enter, but instead it just creates a new line. — dessalines
– dessalines, Commented May 3, 2022 at 21:04

Gabriele Mariotti · Accepted Answer · 2021-06-09 06:20:49Z

34

You can use something like:

val (focusRequester) = FocusRequester.createRefs()

TextField(
    value = text,
    onValueChange = {
        text = it
    },
    singleLine = true,
    keyboardOptions = KeyboardOptions(imeAction = ImeAction.Done),
    keyboardActions = KeyboardActions(
        onDone = { focusRequester.requestFocus() }
    ),
    modifier = Modifier.onKeyEvent {
        if (it.nativeKeyEvent.keyCode == KeyEvent.KEYCODE_ENTER){
            focusRequester.requestFocus()
            true
        }
        false
    }
)

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

answered Jun 9, 2021 at 6:20

Gabriele Mariotti

370k114 gold badges1k silver badges935 bronze badges

Sign up to request clarification or add additional context in comments.

7 Comments

Arthur Over a year ago

thanks for this, I've tried adding this to the 2nd textfield

singleLine = true,     keyboardOptions = KeyboardOptions(imeAction = ImeAction.Done),     keyboardActions = KeyboardActions(         onDone = { focusRequester.requestFocus() }     ),     modifier = Modifier.onKeyEvent {         if (it.nativeKeyEvent.keyCode == KeyEvent.KEYCODE_ENTER){             focusRequester.requestFocus()             true         }         false     }

to the second textfield and use focusRequester.freeFocus() instead but somehow it didn't remove the focus on the 2nd textfield any idea on this?

Gabriele Mariotti Over a year ago

@ArcRuler Use val focusManager = LocalFocusManager.current and in the Modifier.onKeyEvent of the 2nd field: focusManager.clearFocus()

dessalines Over a year ago

How would I run an IME action there? A physical keyboard enter does not trigger any IME action, and I need it to run onDone.

midenok Over a year ago

@dessalines I guess this is Done button on on-screen keyboard. GabrieleMariotti I guess, did you miss "else" before "false"?

midenok Over a year ago

Looks like singleLine = true and true in onKeyEvent don't help: newline is added to output variable.

|

Hussien Fahmy · Accepted Answer · 2024-08-21 12:41:14Z

For Windows / Desktop platform with KMP

You need

                singleLine = true,
                modifier = Modifier.onKeyEvent { event ->
                    return@onKeyEvent if (event.key.keyCode == Key.Enter.keyCode){
                        viewModel.login(userName, userName)
                        true
                    } else {
                        false
                    }
                }

example

           TextField(
                value = userName,
                onValueChange = { userName = it },
                label = { Text("Username") },
                keyboardOptions = KeyboardOptions(imeAction = ImeAction.Done),
                keyboardActions = KeyboardActions(onDone = {
                    viewModel.login(userName, userName)
                }),
                singleLine = true,
                modifier = Modifier.onKeyEvent { event ->
                    return@onKeyEvent if (event.key.keyCode == Key.Enter.keyCode){
                        viewModel.login(userName, userName)
                        true
                    } else {
                        false
                    }
                }
            )

jc12 · Accepted Answer · 2024-09-12 16:55:15Z

0

If you don't want the key pressed to be included in onValueChange you can use the onPreviewKeyEvent modifier to intercept the key press and do an action

example:

    modifier = Modifier
        .onPreviewKeyEvent {
            if (it.key == Key.Enter && it.nativeKeyEvent.action == ACTION_DOWN) {
                //do action
                true
            } else {
                false
            }
        }

answered Sep 12, 2024 at 16:55

jc12

1,8574 gold badges22 silver badges28 bronze badges

Collectives™ on Stack Overflow

Jetpack Compose TextField capture keyboard Enter-input

3 Answers 3

7 Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

7 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related