TouchArea with FocusScope: Missing first pointer-event

[Murmele]

Description

When using a component with a nested TouchArea and FocusScope the first pointer-event of the TouchArea is of type PointerEventKind.up (release). This is because the focus event captures the first event (https://github.com/slint-ui/slint/blob/master/internal/core/items/input_items.rs#L333) and it will not forwarded to the TouchArea.
On the mouse release and on the next press the FocusScope has already the focus and just ignores the event and it will be forwarded to the TouchArea

One solution I found is setting focus-on-click: false for the FocusScope and setting the focus on the first click of the TouchArea. In this case the TouchArea receives all pointer-events and the FocusScope handles the key events.
Is there a more elegant method?

Not working example

export component MissingPress inherits Rectangle {
    preferred-height: 400px;
    preferred-width: 400px;
    background: green;
    TouchArea {
        FocusScope {
            key-pressed(event) => {
                return reject;
            }
        }

        pointer-event(event) => {
            if event.kind == PointerEventKind.down {
                debug("Pressed x during Press: ", self.pressed-x);
            } else if event.kind == PointerEventKind.up {
                debug("Pressed x during Release: ", self.pressed-x);
            }
        }
    }
}

Working example

export component TouchAreaAndFocusScope inherits Rectangle {
    preferred-height: 400px;
    preferred-width: 400px;
    background: green;
    TouchArea {
        focusscope:= FocusScope {
            focus-on-click: false;              // << ---------------------
            key-pressed(event) => {
                debug("Key pressed");
                return reject;
            }
        }

        pointer-event(event) => {
            if event.kind == PointerEventKind.down {
                debug("Pressed x during Press: ", self.pressed-x);
                if !focusscope.has-focus { 
                    focusscope.focus();         // << ---------------------
                }
            } else if event.kind == PointerEventKind.up {
                debug("Pressed x during Release: ", self.pressed-x);
            }
        }
    }
}

[Koishiiko]

I also encountered a similar issue, and then found the solution here, set the focus of the FocusScope on init, working good for now:

export component MissingPress inherits Window {
    preferred-height: 400px;
    preferred-width: 400px;
    background: green;
    TouchArea {
        fs := FocusScope {
            key-pressed(event) => {
                return reject;
            }
        }

        pointer-event(event) => {
            if event.kind == PointerEventKind.down {
                debug("Pressed x during Press: ", self.pressed-x);
            } else if event.kind == PointerEventKind.up {
                debug("Pressed x during Release: ", self.pressed-x);
            }
        }
        init => {
            fs.focus();
        }
    }
}

[Murmele]

But when it looses in a more complex szenario you are again in the same situation

[Koishiiko]

Yes, I quickly found out that as soon as multiple FocusScopes are used, this solution no longer works. So I’ve put all the event handling in a single place and then passed the events down to other components, but this can only handle some simple operations.

Maybe the focus shouldn’t consume click event? That would make more sense, and it looks like other UI frameworks handle it that way too.