Not possible to tab to next text field (or previous)

[CarsonRedeye]

I am making a login form. I have 2 OutlinedTextFields. I can add ImeActions for the Enter key, but there seems to be no option for the tab key. Furthermore, onValueChange is not called when I press the tab key by default, so there is no way to detect pressing tab, and shift focus to the next text field.

This is running on MacOs 11.0.1

[prepor]

We definitely need to have better support for controlling focus by a keyboard. Meantime you can intercept keyboard events like described here https://github.com/JetBrains/compose-jb/tree/master/tutorials/Keyboard

[CarsonRedeye]

Great thanks I tried this but ran into a few problems. Key.Tab still doesn't fire the on callback. Also, the second time I press a key combination like Key.CtrlLeft + Key.Minus, the callback is called if I press either Key.CtrlLeft or Key.Minus key separately.

[prepor]

Could you please provide a code example where you see such problems?

[CarsonRedeye]

Hi please replace this file in the codeviewer example https://github.com/JetBrains/compose-jb/blob/master/examples/codeviewer/common/src/desktopMain/kotlin/org/jetbrains/codeviewer/platform/Theme.kt
With this

@Composable
actual fun PlatformTheme(content: @Composable () -> Unit) {

    DesktopTheme(content = { TestTextField() })
}

@OptIn(ExperimentalFocus::class, ExperimentalKeyInput::class)
@Composable
private fun TestTextField() {
    Column(Modifier.fillMaxSize()) {
        var text by remember { mutableStateOf("Hello") }
        MaterialTheme {
            OutlinedTextField(
                value = text,
                onValueChange = {
                    text = it
                },
                modifier = Modifier
                    .keyInputFilter {
                        if (it.key == Key.B) {
                            println("B works")
                        }

                        if (it.key == Key.Tab) {
                            println("Tab doesn't")
                        }
                        false
                    }.shortcuts {
                        on(Key.CtrlLeft + Key.Equals) {
                            println("Press ctrl equals") // Prints "Pressed Shift Enter"?!?!
                        }

                        on(Key.AltLeft + Key.Enter) {
                            println("Pressed Alt enter") // Doesn't print
                        }

                        on(Key.ShiftLeft + Key.Enter) {
                            println("Pressed Shift enter") // Doesn't print
                        }
                    }
            )
        }
    }
}

[ScottPierce]

Seeing the same issue.

[Inego]

We definitely need to have better support for controlling focus by a keyboard. Meantime you can intercept keyboard events like described here https://github.com/JetBrains/compose-jb/tree/master/tutorials/Keyboard

There's currently no access to the AppWindow backing a Dialog. So, how is it possible to set up a keyboard handler for the scope of a Dialog?

[covercash2]

i have something that kind of works for this

    val content0 = remember { mutableStateOf("") }
    val content1 = remember { mutableStateOf("") }

    val focusFirst = FocusRequester.Default
    val focusSecond = FocusRequester.Default

    Column {
        TextField(
            content0.value, onValueChange = { content0.value = it },
            modifier = Modifier.focusRequester(focusFirst)
                .onKeyEvent {
                    when (it.key) {
                        Key.Tab -> {
                            focusSecond.requestFocus()
                            true
                        }
                        else -> false
                    }
                }
        )
        TextField(
            value = content1.value, onValueChange = { content1.value = it },
            modifier = Modifier.focusRequester(focusSecond).shortcuts {
                on(Key.ShiftLeft + Key.Tab) {
                    focusFirst.requestFocus()
                }
            }
        )
    }

but now i'm running into a seperate issue where on(Key.ShiftLeft + Key.Tab) activates with left shift only. i'm also not sure how this solution scales.

[akurasov]

@Rsedaikin does your tab-navigation implementation cover this?

[Ayfri]

Any fix soon ?

[akurasov]

@Ayfri tab-navigation is available in build 0.5.0-build262. Try to see if it fits you needs.

[ialokim]

This is still an issue with version 1.1.1 for multiline text fields (not for single line ones).

As a reference, we are using the following workaround:

@OptIn(ExperimentalComposeUiApi::class)
@Composable
fun Modifier.moveFocusOnTab(
    focusManager: FocusManager = LocalFocusManager.current
) = onPreviewKeyEvent {
    if (it.type == KeyEventType.KeyDown && it.key == Key.Tab) {
        focusManager.moveFocus(
            if (it.isShiftPressed) FocusDirection.Previous
            else FocusDirection.Next
        )
        return@onPreviewKeyEvent true
    }
    false
}

[Burtan]

The bug with multiline textfields should be mentioned in the tab tutorial https://github.com/JetBrains/compose-jb/tree/master/tutorials/Tab_Navigation

[dima-avdeev-jb]

Made PR with this workaround code snippet:
#2496