QML: Go to the next form control

Question

How do I move focus from one control to the next inside a QML form? By default it works with a button Tab, but I need to change it to Enter. All controls are ordered using Gridlayouttwo columns.

Answer 1

I defined a new component, TextFieldMoveOnReturn.qml

import QtQuick 2.0
import QtQuick.Controls 1.1

TextField {
    Keys.onReturnPressed:  nextItemInFocusChain().forceActiveFocus()
}

If you use this instead of TextField, you will get the required behavior

edit the best solution: define a new component GridLayoutNextOnReturn.qml

import QtQuick 2.0
import QtQuick.Layouts 1.1

GridLayout {
    Keys.onReturnPressed: {
        for (var i = 0; i < children.length; ++i)
            if (children[i].focus) {
                children[i].nextItemInFocusChain().forceActiveFocus()
                break
            }
    }
}

and use the usual TextField inside - it works like a charm

Answer 2

onEditingFinished:

import QtQuick 2.2
import QtQuick.Controls 1.2
import QtQuick.Layouts 1.1

Rectangle {
    width: 400
    height: 400

    GridLayout {
        anchors.fill: parent
        columns: 2

        Label {
            text: "Name"
        }
        TextField {
            onEditingFinished: addressEdit.focus = true
        }
        Label {
            text: "Address"
        }
        TextField {
            id: addressEdit
        }
    }
}

Answer 3

Use Keys.onReturnPressedandforceActiveFocus()

import QtQuick 2.2
import QtQuick.Controls 1.2
import QtQuick.Layouts 1.1

Rectangle {
    width: 400
    height: 400

    GridLayout {
        anchors.fill: parent
        columns: 2

        Label {
            text: "Name"
        }
        TextField {
            Keys.onReturnPressed: organizationEdit.forceActiveFocus()
        }
        Label {
            text: "Organization"
        }
        TextField {
            id: organizationEdit
            Keys.onReturnPressed: addressEdit.forceActiveFocus()
        }
        Label {
            text: "Address"
        }
        TextField {
            id: addressEdit
        }
    }
}