SSelect need closed the lisview when it losed focus

[iincity]

SSelect need closed the lisview when lose focus

[syf20020816]

you should use in-out property <bool> is-show to control yourself
the way to solve :
use a FocusScope component to hold the SSelect, and bind FocusScope's has-focus prop with is-show

FocusScope{
   SSelect{
        is-show: parent.has-focus;
   }
}

[iincity]

这样也无法工作，加入FocusScope后，还会导致在同一个Rectangle的界面布局变乱

[syf20020816]

You don't seem to understand how FocusScope and TouchArea should be laid out. I will give you some example to help you understand that

[syf20020816]

import { SButton } from "../../src/button/index.slint";
import { SSelect } from "../../src/select/index.slint";
export component TestSelect {
    height: 400px;
    width: 400px;
    VerticalLayout {
        spacing: 20px;
        alignment: center;
        SButton {
            text: "1";
        }
        FocusScope {
            // get select height and width as focusscope height and width
            height: s.height;
            width: s.width;
            // if you wanna to control position you can use x and y in focusscope
            // or you can add focusscope into a Rectangle and control position by Rectangle
            s:= SSelect {
                options: [
                    {label:"Shangai",value:"s01"},
                    {label:"Los Angeles",value:"l02"},
                    {label:"New York",value:"n03"},
                    {label:"Hong Kong",value:"h04"},
                  ];
            }
        }
        SButton {
            text: "2";
        }
    }
}

[syf20020816]

这样也无法工作，加入FocusScope后，还会导致在同一个Rectangle的界面布局变乱

I do not know your code, so I can not give you the accurate solution

[syf20020816]

the right way to control layout is to use (Rectangle, VLayout, HLayout , GraidLayout) or use x,y in Rectangle

[iincity]

FocusScope {
SSelect {
y: 100px;
font-weight: 700;
is-show: parent.has-focus;
theme: Error;
card-width: 300px;
options: [
{label:"Shangai",value:"s01"},
{label:"Los Angeles",value:"l02"},
{label:"New York",value:"n03"},
{label:"Hong Kong",value:"h04"},
];
changed(index,item)=>{
t.index = index;
t.label = item.label;
t.value = item.value;
self.close();
}
}
}

[syf20020816]

I understand, it seems that external bidirectional binding will interfere with internal binding. I will provide an option in the next version to automatically close Select when it loses focus