Qml Column not resizing when bottom item visible goes false

[supa5000]

Dear all,

Please find minimal example attached below. The issue is that we have a component that is sized by childrenRect that is Column, that size does not seem to get updated at some cases. The main issue is not that colum size does not go to 0, but rather that its not updating at all if the bottom component goes visible=false (it does update size when middle or top component goes visible=false).

How should i force the colum size to be updated? Should i file bug?

Scenario 1 (start fresh):

• User clicks 'turn 1'
• Column gets resized, and on console i see 'qml: Column new heigth: 110'
• User clicks 'turn 2'
• Column gets resized, and on console i see 'qml: Column new heigth: 50'
• User clicks 'turn 3'
• Column does not get resized (Expected: colum size goes 0)

Scenario 2 (start fresh):

• User clicks 'turn 3'
• Column does not get resized, no text on console (Expected: colum size goes smaller)
• User clicks 'turn 2'
• Column does not get resized, no text on console (Expected: colum size goes smaller)
• User clicks 'turn 1'
• Column does not get resized, no text on console (Expected: colum size goes 0)

Tested with

• Qml Runtime 6.2.0
• $DEV/6.2.0/gcc_64/bin/qml minimal.qml

import QtQuick 
import QtQuick.Controls 

    Rectangle
    {
            height: 500
            width: 100
            color:"black"

    Column
    { 
        spacing: 20 
        Button {
            text:"Turn 1"
            onClicked: { r1.visible = !r1.visible }
        }
        Button {
            text:"Turn 2"
            onClicked: { r2.visible = !r2.visible }
        }
        Button {
            text:"Turn 3"
            onClicked: { r3.visible = !r3.visible }
        }
        Rectangle
        {
            color:"red"
            height: column.height
            width: 100
            Column {
                id: column
                width: parent.width
                height: childrenRect.height

                onHeightChanged: { console.log("Column new heigth:", height); }
                spacing: 10 
                Rectangle
                {
                    id:r1
                    color:"blue"
                    width: 50
                    height: 50 
                }
                Rectangle
                {
                    id:r2
                    color:"green"
                    width: 50
                    height: 50 
                }

                Rectangle
                {
                    id:r3
                    color:"magenta"
                    width: 50
                    height: 50 
                }
                    
            }
        }
    }
}