ListView's elements layout breaks when sections are enabled

ListView's elements layout gets messed up when new items are inserted at the very beginning. This happens when section.delegate is defined.

Here is simple example reproducing issue. Say, one wants to list programs broadcasted at some TV channel. By default only today programs are shown, and only when user navigates up to the top of the list, programs for previous day are fetched and inserted. The same applies for programs in the upcoming days (this works flawlessly).

import QtQuick 2.0

ListView {
    width: 800
    height: 400
    focus: true

    model: ListModel {
        Component.onCompleted: addProgramsForDay(15, 0)

        function addProgramsForDay(date, index) {
            for (var i = 0; i < 24; ++i) {
                var e = {
                    "beginDate": date,
                    "name": "Program " + (i + 1)
                }
                insert(index + i, e);
            }
        }
    }
    delegate: Text {
        width: parent.width
        text: model.name
    }

    highlight: Rectangle {
        color: "lightblue"
        width: parent.width
    }
    section {
        property: "beginDate"
        delegate: Text {
            anchors.horizontalCenter: parent.horizontalCenter
            font.pixelSize: 16
            font.bold: true
            text: section
        }
    }

    Keys.onUpPressed: {
        if (currentIndex === 0) {
            model.addProgramsForDay(model.get(0).beginDate - 1, 0)
        }

        event.accepted = false
    }

    Keys.onDownPressed: {
        if (currentIndex === model.count - 1) {
            model.addProgramsForDay(model.get(model.count - 1).beginDate + 1, model.count)
        }

        event.accepted = false
    }
}

Move cursor up to the first item in the initial list (right below section title 15). Then by a simple key stroke move it upwards again. Now you should be able to see that there are only a subset of desired count (24) of items appeared under section 14. Now you can walk freely up and down and should be able observe that layout is broken: unwanted gaps, small offsets, sometimes even overlapping items occur.

I have noticed that the amount of missing items depends on how much of them fit into the height of the window. You may play with height property of the root item (set such values that all 24 items do not fit at the same time) or resize window by dragging its bottom border in a usual way.

When you have just crossed section boundary and see that, for example, 3 items are missing. Press up key exactly 3 times and the cursor will jump down 3 rows similar to the cursor behavior when one is stepping the loop under debugger. Looks like items are overlapped or hidden while their positions overlap.

Another interesting observation is that the issue is irrelevant for quick movement, i.e. when you press and hold the up key instead of pressing for a short time.