Updating model items causes conditional components to reset

[ubruhin]

Consider this Slint code (open in SlintPad):

import { Button, ComboBox } from "std-widgets.slint";

export component AppWindow inherits Window {
    property <[bool]> show-boxes: [false];

    width: 200px;
    height: 100px;

    Button {
        y: 50px;
        text: "Show";
        clicked => {show-boxes[0] = true;}
    }

    if show-boxes[0]: ComboBox {
        y: 10px;
        model: ["Item 1", "Item 2", "Item 3"];

        init => { debug("init"); }
    }
}

A click on the button causes the the first model value changing to true, which in turn will enable the conditional ComboBox. So far so good, this works as expected. However, when clicking the button again (which actually does not modify the model value anymore), the ComboBox component is re-created. You can see it that the previously selected combobox item is discarded, i.e. current-index is reset to 0. And in the console we can see the "init" message appearing with each click.

Unfortunately this behavior is a big problem for the LibrePCB project. So I wonder, is this expected behavior or is it considered a bug?

---

The example above is just a MWE for showing the problem. Our real use-case is the following:

The toolbar in the editor depends on the active tool. And the active tool is part of a tab from a model of tabs. In simplified form:

export enum EditorTool {
    select,
    wire,
    netlabel,
    polygon,
    text,
    component,
    measure,
}

export struct TabData {
    tool: EditorTool,  // <-- this decides which toolbar component is shown
    background-color: brush,
    // many more members...
}

export component AppWindow inherits Window {
    in-out property <[TabData]> tabs;
    in-out property <int> current-tab-index;

    if tabs[current-tab-index].tool == EditorTool.wire: WireToolBar {}
    if tabs[current-tab-index].tool == EditorTool.polygon: PolygonToolBar {}
    if tabs[current-tab-index].tool == EditorTool.measure: MeasureToolBar {}
}

Now, the C++ backend calls set_row_data() on the tabs model every time any data of the tab changes, to update the UI. If the current tool changed, it will cause some toolbar to hide and another one to appear. But if the tool didn't change, it will still re-initialize the current toolbar, causing any user input to be discarded, focus problems, and even some flickering of the cursor.

Now I'm struggling how to fix this problem. If this is considered a bug which will be fixed, I'm happy as my approach should work then. Otherwise I'd be happy to get some advice how to implement my use-case with persistent conditional components.

(note that tool: EditorTool cannot be moved out of the model as a standalone property, because actually even the whole TabData model is just part of an outer model, i.e. there can be multiple active tools at the same time)

Thanks

[Kamil729]

I think this is related to this issue. I worked around this, by changing width and height of the element to 0 and setting visible to false, instead of making it conditional.

[ubruhin]

Ah true, that issue looks related! Hmm ok maybe I can work around it with your suggestion indeed 🤔 Though it feels very ugly and inefficient to have a lot of hidden components...

Thanks for your hint 👍