How to make tab navigation between textboxes?

[AlexP11223]

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?

[Yaswanth]

use forceActiveFocus(),

This method sets focus on the item and ensures that all ancestor FocusScope objects in the object hierarchy are also given focus.

The reason for the focus change will be Qt::OtherFocusReason. Use the overloaded method to specify the focus reason to enable better handling of the focus change.