TextEdit on ListView don't keep text after scrolling.

MathArtist

Hi everybody!
I'm having an issue with my QtQuick / QML app.
It happens on desktop an android.

I have list of fields to be completed with data.
The fields are listed on a ListView and each one have a TextEdit Element for input.

While completing the fields one by one the list view is scrolled.

The problem is: when the TextEdit is out of the list visible area, is loose the text and it became empty again.

Video of the problem: "Link":https://www.youtube.com/watch?v=1sHKnNZLzhs

Here, a minimal example reproducing the described behavior.

In this example the text filled in the first fields is lost after scrolling to the bottom and get to the top again.

@
import QtQuick 2.2
import QtQuick.Controls 1.2

ApplicationWindow {
id: applicationWindow1
visible: true
width: 200
height: 200
title: qsTr("TextEdit on ListView Test")

ListView {
    id: listView1
    x: 286
    width: 110
    boundsBehavior: Flickable.StopAtBounds
    anchors.horizontalCenter: parent.horizontalCenter
    anchors.bottomMargin: 0
    anchors.topMargin: 0
    anchors.bottom: parent.bottom
    anchors.top: parent.top
    clip: true
    model: ListModel {
        ListElement {
            name: "Grey"
            colorCode: "grey"
        }

        ListElement {
            name: "Red"
            colorCode: "red"
        }

        ListElement {
            name: "Blue"
            colorCode: "blue"
        }

        ListElement {
            name: "Green"
            colorCode: "green"
        }
        ListElement {
            name: "Grey"
            colorCode: "grey"
        }

        ListElement {
            name: "Red"
            colorCode: "red"
        }

        ListElement {
            name: "Blue"
            colorCode: "blue"
        }

        ListElement {
            name: "Green"
            colorCode: "green"
        }
        ListElement {
            name: "Grey"
            colorCode: "grey"
        }

        ListElement {
            name: "Red"
            colorCode: "red"
        }

        ListElement {
            name: "Blue"
            colorCode: "blue"
        }

        ListElement {
            name: "Green"
            colorCode: "green"
        }
        ListElement {
            name: "Grey"
            colorCode: "grey"
        }

        ListElement {
            name: "Red"
            colorCode: "red"
        }

        ListElement {
            name: "Blue"
            colorCode: "blue"
        }

        ListElement {
            name: "Green"
            colorCode: "green"
        }
        ListElement {
            name: "Grey"
            colorCode: "grey"
        }

        ListElement {
            name: "Red"
            colorCode: "red"
        }

        ListElement {
            name: "Blue"
            colorCode: "blue"
        }

        ListElement {
            name: "Green"
            colorCode: "green"
        }
    }
    delegate: Item {
        width: 100
        height: 40
            Rectangle {
                width: 100
                height: 40
                color: colorCode
                TextEdit {

                    font.pointSize: 23
                    anchors.fill: parent

                    font.bold: true
                    anchors.verticalCenter: parent.verticalCenter
                }
            }
    }
}

}
@

Is this a bug?
Do I need to set something else to make it persistent?
Should I make copy of the text after editing finished and put it back when it became visible as a normal workflow?

Best Regards

dasRicardo

Can't reproduce on linux qt 5.3.2 and android emulator

@
ListView {
id: listView1
x: 286
width: 110
boundsBehavior: Flickable.StopAtBounds
anchors.horizontalCenter: parent.horizontalCenter
anchors.bottomMargin: 0
anchors.topMargin: 0
anchors.bottom: parent.bottom
anchors.top: parent.top
clip: true
model: ListModel {
ListElement {
name: "Grey"
colorCode: "grey"
}

            ListElement {
                name: "Red"
                colorCode: "red"
            }

            ListElement {
                name: "Blue"
                colorCode: "blue"
            }

            ListElement {
                name: "Green"
                colorCode: "green"
            }
            ListElement {
                name: "Grey"
                colorCode: "grey"
            }

            ListElement {
                name: "Red"
                colorCode: "red"
            }

            ListElement {
                name: "Blue"
                colorCode: "blue"
            }

            ListElement {
                name: "Green"
                colorCode: "green"
            }
            ListElement {
                name: "Grey"
                colorCode: "grey"
            }

            ListElement {
                name: "Red"
                colorCode: "red"
            }

            ListElement {
                name: "Blue"
                colorCode: "blue"
            }

            ListElement {
                name: "Green"
                colorCode: "green"
            }
            ListElement {
                name: "Grey"
                colorCode: "grey"
            }

            ListElement {
                name: "Red"
                colorCode: "red"
            }

            ListElement {
                name: "Blue"
                colorCode: "blue"
            }

            ListElement {
                name: "Green"
                colorCode: "green"
            }
            ListElement {
                name: "Grey"
                colorCode: "grey"
            }

            ListElement {
                name: "Red"
                colorCode: "red"
            }

            ListElement {
                name: "Blue"
                colorCode: "blue"
            }

            ListElement {
                name: "Green"
                colorCode: "green"
            }
        }
        delegate: Rectangle {
                    width: 100
                    height: 40
                    color: colorCode
                    TextEdit {
                        color: '#ffffff'
                        font.pointSize: 23
                        anchors.fill: parent

                        font.bold: true
                        anchors.verticalCenter: parent.verticalCenter
                    }
        }
    }

@

MathArtist

Hi dasRicardo,

with the code posted by me, the problem persist in linux Qt 5.3.1 , 5.3.2 and 5.4.0(Beta) and android same versions.
I have not tested on another OS yet.

dasRicardo

OK, and with my code the same? I have remove the Item around the Rectangle, i have no idea why you need it?

MathArtist

I have tried your code too.
The rectangles where only for visual separation.

After writing some text in all the TextEdit elements an playing a little with the scroll the content of many of them just became empty.

And the text change event is not rised when this happen.

MathArtist

I added a "video":https://www.youtube.com/watch?v=1sHKnNZLzhs of the problem.
I also tried on macosx and get the same behavior.

dasRicardo

Hmmm, sounds like a bug i havn't test it so massivly. Whats your goal for this construct? What's your ui idea behind this?

MathArtist

I added a video of the problem in the first post of this thread.
I also tried on macosx and get the same behavior.

dasRicardo

Can't reproduce this sorry, maybe graphics driver bug?

MathArtist

[quote author="dasRicardo" date="1412026473"]Hmmm, sounds like a bug i havn't test it so massivly. Whats your goal for this construct? What's your ui idea behind this?[/quote]

My goal is to make a survey app. so you define some questions. the list say question and have some space for input the data.
Like name, last name, age, address, opinion... etc etc

the real app is more complex but for the forum I just make a simple test code with the minimal elements to reproduce the problem.

MathArtist

[quote author="dasRicardo" date="1412026795"]Can't reproduce this sorry, maybe graphics driver bug?[/quote]

I think this is not a graphic driver issue, because I have same result on Mac with Nvidia graphics, suse linux with intel graphics, and various android phones and tablet from different vendors.

dasRicardo

Hmm, but i think a list is the wrong component for you. Have you try to simply add some input into a flickable container and test if it produce the same result?

hmuelner

From the documentation of ListView ("http://qt-project.org/doc/qt-5/qml-qtquick-listview.html#delegate-prop":http://qt-project.org/doc/qt-5/qml-qtquick-listview.html#delegate-prop):

Note: Delegates are instantiated as needed and may be destroyed at any time. They are parented to ListView's contentItem, not to the view itself. State should never be stored in a delegate.

You should map the text of your TextEdit to a property of the ListElements in your ListModel.

Torgeir

The bug is in your delegate. Documentation for ListView says:

bq. Delegates are instantiated as needed and may be destroyed at any time. They are parented to ListView's contentItem, not to the view itself. State should never be stored in a delegate.

When your delegate contains a TextEdit and you don't store the edited text somewhere, it will be lost when the delegate is destroyed/recreated.

MathArtist

Thanks, for the info.

What can be a good workarround or a proper workflow for my app?

Suggestions are welcome.