How to make tab navigation between textboxes in QML?

Question

I have a QML component (or whatever it is, just a file with Item in root) with border and TextInput, basically a standard textbox.

import QtQuick 2.7

Item {
    id: textBox
    clip: true

    property alias  inputText:       inputText.text
    property alias  mode:            inputText.echoMode
    property color  borderColor:     "gray"
    property int    borderWidth:     1

    Rectangle {
        id: rectInput
        anchors.fill: parent
        border.color: borderColor
        border.width: borderWidth
        radius:       4
    }

    TextInput {
        id: inputText
        anchors.fill:       parent
        anchors.leftMargin: 3
        verticalAlignment:  Text.AlignVCenter
        selectByMouse:      true
    }
}

I have a form with 2 of these components.

GridLayout {
    anchors.horizontalCenter: parent.horizontalCenter
    anchors.verticalCenter: parent.verticalCenter
    width: 400
    columns: 2
    rowSpacing: 10

    Text {
        id: textName
        clip: true
        text: "Name: "
    }
    TextBox {
        id: tboxName
        Layout.fillWidth: true
        height: 30
        KeyNavigation.tab: tboxPassword
    }

    Text {
        id: textPassword
        clip:  true
        text: "Password: "
    }
    TextBox {
        id: tboxPassword
        Layout.fillWidth: true
        height: 30
        mode: TextInput.Password
    }

    ...
}

How to make tab navigation between them? I tried to add KeyNavigation.tab but no effect.

btw does QML/Qt Quick really doesn't have any default tab handling between interactable components? So we have to always specify tabs manually?

eyllanesc eyllanesc · Accepted Answer · 2018-10-09T15:08:08

The problem is the one that receives the focus is TextBox which is an item that does not know how to handle it, so we must activate the activeFocusOnTab property and handle the event with onActiveFocusChanged:

import QtQuick 2.7

Item {
    id: textBox
    clip: true

    property alias  inputText:       inputText.text
    property alias  mode:            inputText.echoMode
    property color  borderColor:     "gray"
    property int    borderWidth:     1
    activeFocusOnTab: true // <--
    onActiveFocusChanged: if(activeFocus) inputText.focus = true // <--

   Rectangle {
        id: rectInput
        anchors.fill: parent
        border.color: borderColor
        border.width: borderWidth
        radius:       4
    }

    TextInput {
        id: inputText
        anchors.fill:       parent
        anchors.leftMargin: 3
        verticalAlignment:  Text.AlignVCenter
        selectByMouse:      true
        focus: true // <--
    }
}

How to make tab navigation between textboxes in QML?

1 Answers