How to obtain elements outside the scope?

[xjy12345654]

` Rectangle {

    VerticalLayout {
        if selected_index == "0":VerticalLayout {
            HorizontalLayout {
                spacing: 10px;
                Rectangle {
                    fo_input := LineEdit { }
                    height: 30px;
                }
                padding-bottom: 15px;
            }
        }
        if selected_index == "1":VerticalLayout {
            HorizontalLayout {
                spacing: 10px;
                Rectangle {
                    width_inupt := LineEdit { }
                    height: 30px;
                }
                padding-bottom: 15px;
            }

            HorizontalLayout {
                spacing: 10px;
                Rectangle {
                    height_inupt := LineEdit { }
                    height: 30px;
                }
                padding-bottom: 15px;
            }
        }
    }
}

Rectangle {
    HorizontalLayout {
        alignment: center;
        Rectangle {
            width: 200px;
            height: 40px;
            Text {
                font-size: 16px;
                text: "Enter";
                color: #fff;
            }

            area := TouchArea {
                mouse-cursor: pointer;
                clicked => {
                    if (root.selected_index == "0") {
                        fo_input.clear-focus() //×
                    } else {
                    }
                }
            }
        }
    }
}`

demo
I used an if statement to check the rendering module. I wanted to unfocus the Lineinput when I clicked Enter, but I couldn't get fo_input outside the if scope. Using visible judgment will still occupy the layout space. Okay, then setting height: 0 can solve it. I want to know if there is a better solution?

[hunger]

There is a rather hacky way to do this:

demo

The "problem" is the if introducing a new component and getting the information pass into that component from the outside.

I am abusing a property in root for that and a two-way binding in what used to be fo_input, which binds the two values together even across component boundaries. Then I use a changed handler to trigger the call (and reset the property).

Not nice at all, we really should have some better support for this, but at least this should not stop you from making progress now.

[xjy12345654]

@hunger Thank you very much! The method you mentioned works. I just thought of another trick that's not as elegant: create a hidden input field outside the current context. When the Enter key is pressed, use input.focus(); to shift the focus to this hidden input, and then input.clear-focus();. This way, the focus is transferred away 😂.

[hunger]

Yeap, that should work, too:-) I am not sure which approach is less hacky though;-)