Focus switching among focusable components doesn't work as it does with Views [192470280]

Duplicate

of 184670295

Bug

adexe s nau

Status Update

No update yet.

Description

mi...@gmail.com

created issue #1

Jun 30, 2021 06:55PM

Compose 1.0.0-beta09

Having more "focusable" composables, like TextField or Button, I'd expect that I can navigate between them using keyboard cursor keys, Tab key, or D-pad on a remote controller.

Example:

@Composable
fun SimpleFilledTextFieldSample() {
    var text by remember { mutableStateOf("Hello") }

    TextField(
        value = text,
        onValueChange = { text = it },
        label = { Text("Label") }
    )
}



@Composable
fun Main() {
    ComposeTheme{
        Column{
            SimpleFilledTextFieldSample()
            SimpleFilledTextFieldSample()
            Button(onClick = { }) {
                Text("OK")
            }
            Button(onClick = { }) {
                Text("Cancel")
            }
        }
    }
}

Currently cursor keys work within one component, but can't switch focus to next component. Also Tab key inserts tab character to text, but doesn't switch focus to next component (and Shift+Tab to previous).

I wonder how Compose is supposed to work on Android TV, and on devices without touch screen. With above code, I can switch focus to other component only by touching it.

Is there some special way to achieve such focus switching? I didn't find it. And I didn't find mention of this in documentation.

Wed Jun 30 2021 20:54:49 GMT+0200 (Central European Summer Time).png

10 KB

View

Download

Comments

so...@google.com <so...@google.com> Jul 1, 2021 02:02PM

Assigned to ra...@google.com.

ma...@gmail.com <ma...@gmail.com> #2Aug 2, 2021 07:10AM

I wasn't able to figure it out either, I made a small test app specifically for Android TV with a couple of buttons using compose but the controller doesn't work at all with the app.

si...@gmail.com <si...@gmail.com> #3Aug 23, 2021 02:53PM

Hi, I also faced the same problem. I'm trying to navigate inside lists (Column/LazyColumn) using an external keyboard and I couldn't. I've tried everything with focusable and LocalFocusManager and I couldn’t find a way to navigate inside a scrollable column with an external keyboard.

Here’s a simple code example. What I expect is to be able to navigate through the items using the arrow up/down on my keyboard.

val list = (1..100).map { "Item $it" }
LazyColumn {
    items(list) { item -> Text(text = item, modifier = Modifier.fillMaxWidth().padding(16.dp).focusable()) }
}

ra...@google.com <ra...@google.com> #4Aug 23, 2021 07:44PM

silva.jordan@

We currently only support moving focus in non-lazy lists. You can observe this bug for updates on when lazy list support is available. For now, here is an example of a non-lazy list where you can use a D-Pad to move focus.

mice777@

You can use the D-Pad keys to move between multiple focusables at the same level. You can move focus IN and OUT by using the D-Pad center and the back key. Here is an example that demonstrates 2 D focus search (Up/Down/Left/Right/In/Out).

Tab/Shift+Tab support didn't make it to 1.0 you would have to use one of the 1.1 alpha builds to get access to this feature. Here is an example that demonstrates 1D focus search (Next/Previous).

ra...@google.com <ra...@google.com> #5May 27, 2022 12:08AM

Status: Duplicate of

184670295

You should be able to move focus in LazyLists by using a DPad. There are a few remaining features remaining, which are tracked by https://issuetracker.google.com/184670295. Marking this issue as a duplicate.

Issue 192470280