Shrinking a ListView to a very small size with a Splitter hangs the browser tab

I've noticed an issue when using Splitters to shrink a ListView that resizes together with the shrinking container. Once you shrink it to the smallest size possible, the browser tab hangs forcing you to close the unresponsive tab.

Reproduction on the Playground (move the splitter all the way to the right)

This issue persists on Chrome, Edge, and FireFox. Seems like an infinite loop or recursion occurs during resizing.

Pasting in the code bellow:

<vbox style="padding: 5px;" width="100%" height="100%">
    <splitter direction="horizontal" width="100%" height="100%">
        <box width="75%" height="100%">
        </box>
        <box width="25%" height="100%">
            <listview id="lv1" width="100%" height="100%">
                <data>
                    <item text="List item 1" />
                    <item text="List item 2" />
                    <item text="List item 3" />
                    <item text="List item 4" />
                    <item text="List item 5" />
                </data>
            </listview>
        </box>
    </splitter>
</vbox>

[ianharrigan]

Hi, yes, there are certainly some outstanding issues on splitters currently... they are getting better (slowly) but there are certainly some outstanding problems... This one is actually new to me, so ill have investigate...

Sorry! (and thanks!)
Ian

Hi, yes, there are certainly some outstanding issues on splitters currently... they are getting better (slowly) but there are certainly some outstanding problems... This one is actually new to me, so ill have investigate...

Sorry! (and thanks!) Ian

No worries, man. Keep on doing the good work :)

I also stumbled upon an issue while trying to mitigate the original issue. If I try setting one of the splitter's box element a style="min-width:250px;", the tab hangs on initial render/tab open.

The code example would be:

<vbox style="padding: 5px;" width="100%" height="100%">
    <splitter direction="horizontal" width="100%" height="100%">
        <box width="75%" height="100%">
        </box>
        <box width="25%" height="100%" style="min-width:250px;">
            <listview id="lv1" width="100%" height="100%">
                <data>
                    <item text="List item 1" />
                    <item text="List item 2" />
                    <item text="List item 3" />
                    <item text="List item 4" />
                    <item text="List item 5" />
                </data>
            </listview>
        </box>
    </splitter>
</vbox>