about slint FocusScope

[sillyest]

Bug Description

export component Demo1 inherits Rectangle {
    width: 200px;
    height: 200px;
    LineEdit {
        x: 50px;
        y: 50px;
        width: 100px;
    }
    FocusScope {}
}

The above code works when I want to implement clicking on a blank area to make the LineEdit lose focus, but there is an issue. When I click on the LineEdit, it gains focus, but if I click on it again, it loses focus.

export component Demo2 inherits Rectangle {
    width: 200px;
    height: 200px;


    edit := LineEdit {
        x: 50px;
        y: 50px;
        width: 100px;

        changed has-focus => {
            if self.has-focus {popup.show()} else {popup.close()}
        }
    }

    popup := PopupWindow {
        forward-focus: edit;
        init => {edit.focus()}
        close-policy: PopupClosePolicy.no-auto-close;
        Rectangle {
            x: edit.x;
            y: edit.y + edit.height;
            width: 150px;
            height: 30px;
            background: #D6E4FD;
        }
    }
   
    FocusScope {
        
    }
}

I wanted to implement a feature where a popup window appears when the LineEdit gains focus, and the window closes when it loses focus. However, unlike the previous piece of code, clicking on a blank area does not make the LineEdit lose focus. It continues to retain focus.

Reproducible Code (if applicable)

Environment Details

• Slint Version: 1.12.0
• Platform/OS: window
• Programming Language: rust
• Backend/Renderer: slint-pad

Product Impact

No response

[antis81]

Did you try enclosing the component contents in a parent FocusScope?

export component Demo1 inherits Rectangle {
    width: 200px;
    height: 200px;
    FocusScope {
        LineEdit {
            x: 50px;
            y: 50px;
            width: 100px;
        }
    }
}

[sillyest]

Thank you very much for your response. It works well for demo1. Unfortunately, I’m still unable to resolve the issue with demo2. Please excuse my lack of understanding.

[ogoffart]

FocusScope intercept the click.
What you can do is put the FocusScope behind the LineEdit.

Either like So:

export component Demo1 inherits Rectangle {
    width: 200px;
    height: 200px;
    FocusScope {}
    LineEdit {
        x: 50px;
        y: 50px;
        width: 100px;
    }
}

Or Like so:

export component Demo1 inherits Rectangle {
    width: 200px;
    height: 200px;
    FocusScope {
      LineEdit {
          x: 50px;
          y: 50px;
          width: 100px;
      }
    }
}

[sillyest]

Thanks for your support. Demo1 is resolved now. As for demo2, I’m still working through the issues — any further advice would be greatly appreciated. Apologies for the delay

[antis81]

@sillyest As far as I understand you are searching for a behaviour similar to a ComboBox. Instead of fiddling with a PopupWindow it may be easier to just use Slint's conditional component creation feature with a Rectangle like so

import { VerticalBox, LineEdit, TextEdit, Slider } from "std-widgets.slint";

export component Demo2 inherits Rectangle {
    preferred-width: 200px;
    preferred-height: 200px;

    forward-focus: edit;

    focus-scope := FocusScope { }

    VerticalBox {
        alignment: start;
        padding: 50px;

        // Just to have a second focus component
        // slider := Slider { }

        edit := LineEdit {
            // Instead of a PopupWindow you probably just can use a Rectangle
            // changed has-focus => {
            //     debug("edit focus changed {}", edit.has-focus);
            //     if self.has-focus {
            //         popup.show();
            //     } else {
            //         popup.close();
            //     }
            // }
        }
    }

    if edit.has-focus : popup := Rectangle {
        x: edit.x;
        y: edit.y + edit.height;
        width: 150px;
        height: 30px;
        background: #D6E4FD;
        // place your children here
    }
}

Hope this helps… 😸