How to detect keyboard input in a for loop

[anderslanglands]

I'm just learning and trying to write a treeview. It's going well, but I want to be able to handle Ctrl-click and Shift-click on the rows, but I can't seem to detect keyboard input. My code currently looks like this:

    export component TableView inherits Rectangle {
        in property <[StagePath]> values;

        VerticalBox {
            ListView {
                for row[index] in root.values : 
                    Rectangle {
                        background: row.selected 
                        ? #337788
                        : Math.mod(index, 2) == 0 ? #2a2a2a : #222222;

                        area := FocusScope {
                            property <bool> is-ctrl: false;
                            property <bool> is-shift: false;

                            key-pressed(event) => {
                                debug("key pressed");
                                is-ctrl = event.modifiers.control;
                                reject
                            }

                            key-released(event) => {
                                debug("key released");
                                is-ctrl = !(event.text == Key.Control);
                                reject
                            }

                            TouchArea {
                                clicked => { 
                                    is-ctrl 
                                    ? StageData.select-toggle(index) 
                                    : StageData.select-replace(index); 
                                }
                            }
                        }

                        height: 24px;

                        HorizontalLayout {
                            padding: 4px;
                            padding-left: 8px + row.depth * 16px;
                            Text {
                                overflow: elide;
                                text: row.num-children > 0
                                ? "⊞ " + row.name
                                : "  " + row.name;

                                vertical-alignment: center;
                        }
                    }
                }
            }
        }
    }

the TouchArea works, but the debugs in the key-pressed and key-release events never fire. I've tried putting the FocusScope at the top level of the for (around the Rectangle) and got the same result. Can I make this work somewhow?

[anderslanglands]

Actually I realised even if I wrap the whole component in a FocusScope it doesn't receive events, and if I try to forward focus to the component then I get "element is not focusable" error:

    export component Example inherits Window {
        forward-focus: view;
        view := TableView {
            values: StageData.model;
        }
    }

[anderslanglands]

Discovered that if I name the FocusScope and forward the focus from view then it works.

[ogoffart]

Great that you figure it out.

One thing we should do is put the keyboard modifiers in the pointer event: #2686