Clearing a Qml ListView selection

[kmbar2013]

If I have the following:

import QtQuick 2.4
import QtQuick.Controls 1.3
import QtQuick.Window 2.2
import QtQuick.Dialogs 1.2    

ApplicationWindow {
    title: qsTr("Hello World")
    width: 800
    height: 700
    visible: true

    property var myArray: [1, 2, 3, 4, 5, 6,7,8,9,10,11,12,13,14,15,16,17,18,19,20]

    menuBar: MenuBar {
        Menu {
            title: qsTr("&File")
            MenuItem {
                text: qsTr("&Open")
                onTriggered: messageDialog.show(qsTr("Open action triggered"));
            }
            MenuItem {
                text: qsTr("E&xit")
                onTriggered: Qt.quit();
            }
        }
    }

    Rectangle {
        id: myButton
        anchors.top: parent.top
        anchors.topMargin: 5
        color: "yellow"
        width: 100
        height: 25
        radius: 3
        anchors.horizontalCenter: parent.horizontalCenter
        Text {
            text: "Clear Selection"
            anchors.fill: parent
            horizontalAlignment: Text.AlignHCenter
            verticalAlignment: Text.AlignVCenter
        }

        MouseArea {
            anchors.fill: parent
            onClicked: {
                myListView.currentIndex = -1
            }
        }
    }

    ListView {
        id: myListView
        width: 300
        anchors.horizontalCenter: parent.horizontalCenter
        anchors.top: myButton.bottom
        anchors.topMargin: 5
        anchors.bottom: parent.bottom
        currentIndex: -1
        //highlightFollowsCurrentItem: false
        highlight: Rectangle {
            color: "pink"
            radius: 3
            width: parent.width - 10
            height: 25
            //y: myListView.currentItem.y
            anchors.horizontalCenter: parent.horizontalCenter
        }
        clip: true
        model: myArray
        delegate: Rectangle {
            width: parent.width - 10
            height: 25
            color: "transparent"
            border.color: "cyan"
            anchors.horizontalCenter: parent.horizontalCenter
            Text {
                text: myArray[index]
                horizontalAlignment: Text.AlignHCenter
                verticalAlignment: Text.AlignVCenter
                anchors.fill: parent
            }

            MouseArea {
                anchors.fill: parent
                onClicked: myListView.currentIndex = index
            }
        }
    }

    MessageDialog {
        id: messageDialog
        title: qsTr("May I have your attention, please?")

        function show(caption) {
            messageDialog.text = caption;
            messageDialog.open();
        }
    }
}

When clicking the Clear Selection button I receive the following:
qrc:/main.qml:67: TypeError: Cannot read property of null
qrc:/main.qml:64: TypeError: Cannot read property of null

How can I clear the selection without getting the error?

[Charby]

The way you unselect the current item is correct.
The warning arise because the parent of the highlight component is no longer valid when no item is selected. For the width property (warning line 64) you can simply use "myListView" instead of parent or to check parent first ( width : parent ? parent.width : 0).

[kmbar2013]

Thanks, checking the parent value helped, so I ended up using the following:

import QtQuick 2.4
import QtQuick.Controls 1.3
import QtQuick.Window 2.2
import QtQuick.Dialogs 1.2

ApplicationWindow {
    title: qsTr("Hello World")
    width: 800
    height: 700
    visible: true

    property int myMargin: 5

    menuBar: MenuBar {
        Menu {
            title: qsTr("&File")
            MenuItem {
                text: qsTr("&Open")
                onTriggered: messageDialog.show(qsTr("Open action triggered"));
            }
            MenuItem {
                text: qsTr("E&xit")
                onTriggered: Qt.quit();
            }
        }
    }

    Rectangle {
        id: myButton
        anchors.top: parent.top
        anchors.topMargin: myMargin
        color: "yellow"
        width: 100
        height: 25
        radius: 3
        anchors.horizontalCenter: parent.horizontalCenter
        Text {
            text: "Clear Selection"
            anchors.fill: parent
            horizontalAlignment: Text.AlignHCenter
            verticalAlignment: Text.AlignVCenter
        }

        MouseArea {
            anchors.fill: parent
            onClicked: {
                myListView.currentIndex = -1
            }
        }
    }

    Rectangle {
        width: 300
        anchors.top: myButton.bottom
        anchors.topMargin: myMargin
        anchors.bottom: parent.bottom
        anchors.horizontalCenter: parent.horizontalCenter

        ListView {
            id: myListView
            anchors.fill: parent
            currentIndex: -1
            spacing: 3
            highlightMoveDuration: 25
            highlight: Rectangle {
                width: parent ? parent.width - 10 : 0
                height: parent ? 25 : 0
                color: "pink"
                radius: 3
                anchors.horizontalCenter: parent ? parent.horizontalCenter : undefined
            }
            clip: true

            model: ListModel {
                id: myArray
                Component.onCompleted: {
                    for (var i = 1; i < 46; i++)
                        append({number: i})
                }
            }

            delegate: Rectangle {
                width: parent ? parent.width - 10 : 0
                height: parent ? 25 : 0
                color: "transparent"
                border.color: "cyan"
                anchors.horizontalCenter: parent ? parent.horizontalCenter : undefined
                Text {
                    text: number
                    horizontalAlignment: Text.AlignHCenter
                    verticalAlignment: Text.AlignVCenter
                    anchors.fill: parent
                }

                MouseArea {
                    anchors.fill: parent
                    onClicked: {
                        myListView.currentIndex = index
                    }
                }
            }
        }
    }

    MessageDialog {
        id: messageDialog
        title: qsTr("May I have your attention, please?")

        function show(caption) {
            messageDialog.text = caption;
            messageDialog.open();
        }
    }
}