Binding between text property of two TextFields

Applications QML
#1

Hi!

I’m working on an app that should have two text fields: A raw input and a processed input. The idea would be that the user can modify the processed input at will, but if there’s a change in the raw input, the processed input should get recomputed based on the raw input.

My problem is that updating another text field’s text seems to interfere with text input.
Here is a minimal example of a trivial binding:

import QtQuick 2.0
import Sailfish.Silica 1.0

Page {
    id: page
    allowedOrientations: Orientation.All
    SilicaFlickable {
        anchors.fill: parent
        contentHeight: column.height
        Column {
            id: column

            width: page.width
            spacing: Theme.paddingLarge
            TextField {
                id: raw
                width: parent.width
            }
            TextField {
                id: processed
                width: parent.width

                text : raw.text
            }
        }
    }
}

If I now edit the text in the first field, I get binding loops:

[W] unknown:126 - file:///usr/lib/qt5/qml/Sailfish/Silica/TextField.qml:126:9: QML PreeditText: Binding loop detected for property "text"

Also, the input does not behave as it should. Adding text works fine, but if I try to delete text by holding the backspace key on the on-screen keyboard, only one character gets deleted, and I cannot remove any further characters.

Adding a layer of indirection fixes the binding loop warnings:

import QtQuick 2.6
import Sailfish.Silica 1.0

Page {
    id: page
    allowedOrientations: Orientation.All

    property string indirection;

    SilicaFlickable {
        anchors.fill: parent
        contentHeight: column.height
        Column {
            id: column

            width: page.width
            spacing: Theme.paddingLarge
            TextField {
                id: raw
                width: parent.width
                onTextChanged: { indirection = text; }
            }

            TextField {
                id: processed
                width: parent.width
                text: indirection
            }
        }
    }
}

However, the backspace key still does not work.

I’m a bit lost now, to be honest. Is there a way to update a text field’s text whenever another text field’s text changes without breaking the backspace key’s functionality?

Edit: I’ve now found an acceptable workaround, using placeHolderText. As long as the user does not edit the processed text, it’s shown as placeholder. If the user focuses the text field, I copy the placeholder into the actual text. This also gives the user a visual clue if they edited the text after it was auto-generated from the raw input or not. However, I’m still curious if there is a better solution.