TableView row disappears when trying to edit in QML

Question

I am trying to use QML and the TableView component where I want to update the underlying model by editing some text box. My issue is that sometimes the row visually disappears completely from the TableView and appears again after some clicks. This seems to happen randomly and probably when clicking under the row text.

My implementation is as follows:

import QtQuick 2.2
import QtQuick.Controls 1.4
import QtQuick.Controls.Styles 1.4
import QtQuick.Layouts 1.0
import QtQuick.Window 2.1


Window {
    visible: true
    width: 538
    height: 360

    ListModel {
        id: mymodel

        ListElement {
            title: "VideoName"
            filesize: "1.5GB"
            length: "20:00"
        }

        ListElement {
            title: "VideoName"
            filesize: "1.5GB"
            length: "20:00"
        }

        ListElement {
            title: "VideoName"
            filesize: "1.5GB"
            length: "20:00"
        }
    }


    ControlView {
        visible: true
        width: parent.width; height: parent.height

        anchors.centerIn: parent

        TableView {
            width: parent.width; height: parent.height
            anchors.centerIn: parent

            TableViewColumn {
                resizable: false
                role: "title"
                title: "Title"
                width: 250
            }

            TableViewColumn {
                role: "filesize"
                title: "Size"
                width: 100
                resizable: false
            }

            TableViewColumn {
                role: "length"
                title: "Length"
                width: 100
                resizable: false

            }

            model: mymodel

            rowDelegate: Rectangle {
                height: 54
            }

            itemDelegate: RowLayout {

                anchors.fill: parent

                Loader{
                    id: loaderEditor
                    sourceComponent: editor
                    Connections {
                        target: loaderEditor.item
                    }

                    Component {
                        id: editor
                        TextInput {
                            id: textinput
                            color: styleData.textColor
                            text: styleData.value

                            onEditingFinished: {
                                mymodel.setProperty(styleData.row, styleData.role,
                                                    loaderEditor.item.text)
                            }

                            MouseArea {
                                id: mouseArea
                                anchors.fill: parent
                                hoverEnabled: true
                                onClicked: {
                                    textinput.forceActiveFocus()
                                    textinput.selectAll()
                                }
                            }
                        }
                    }
                }
            }
        }
    }
}

To highlight my problem, this is how the table appears initially:

I can try and edit columns but if I click in the row but not directly on the text, something like this happens

As you can see that row has disappeared. It can come back after a while once I click around but I am not sure what is causing this...

Answer 1

The problem is the rowDelegate . It is taking the default color used by the Rectangle component.

According to the documentation this color is white by default.

So you should set in rowDelegate the color used to fill the row when you select it.

Example:

rowDelegate: Rectangle {
    color: styleData.selected ? "#000" : "#fff"
    height: styleData.selected ? 54 : 20
}

The values in height are just to check more clearly the behavior depending on the row selection.