Cycling Tab Navigation between Custom Components

[Emon Haque]

I've following Custom Component for single line TextInput:

RowLayout {
    height: 20
    property alias label: label.text
    property alias isEnabled: field.enabled
    property alias text: field.text
    property double labelWidth: 0
    property int textAlignment: Text.AlignLeft

    Label {
        id: label
        Layout.minimumWidth: labelWidth > 0? labelWidth : Con.minLabelWidth
        Layout.alignment: Qt.AlignTop
    }

    ColumnLayout{
        TextInput{
            id: field
            Layout.fillWidth: true
            cursorVisible: activeFocus
            selectByMouse: true
            clip: true
            leftPadding: 2
            horizontalAlignment: textAlignment
        }
        Rectangle{
            id: bottomBorder
            Layout.fillWidth: true
            color: field.activeFocus? "lightblue" : "lightgray"
            height: 2
        }
    }
    onFocusChanged: if(activeFocus) field.forceActiveFocus()
}

similar one for multi line TextArea:

RowLayout {
    ...
    Label {...}
    ColumnLayout{
        ScrollView{
            Layout.fillHeight: true
            Layout.fillWidth: true
            TextArea{
                id: field
                wrapMode: "WrapAtWordBoundaryOrAnywhere"
                width: parent.width
                height: parent.height
                selectByKeyboard: true
                selectByMouse: true
                leftPadding: 2
                rightPadding: 5
                cursorVisible: activeFocus
            }
        }
        Rectangle{...}
    }
    onFocusChanged: if(activeFocus) field.forceActiveFocus()
}

and a Shape button:

Item {
    property alias pathData: svg.path
    property alias toolTip: tip.text
    property bool hasToolTip: true
    property alias isEnabled: area.enabled
    signal clicked()

    width: 28
    height: width

    Shape{
        transform: Scale{ xScale: 1.2; yScale: xScale }
        ShapePath{
            id: path
            fillColor: "black"
            PathSvg{
                id: svg
                path: pathData
            }
        }
    }

    ToolTip{
        id: tip
        visible: hasToolTip? area.containsMouse : false
    }

    MouseArea{
        id: area
        anchors.fill: parent
        onClicked: parent.clicked()
        hoverEnabled: true
        onPressed: path.fillColor = area.pressed? "red" : "black"
        onHoveredChanged: path.fillColor = area.containsMouse? "blue" : "black"
        onEnabledChanged: path.fillColor = enabled? "black" : "gray"
    }
    onFocusChanged: path.fillColor = activeFocus? "red" : "black"
}

They're named LineField, AreaField, and PathButton respectively. In some of my Views, I've all these wrapped with ColumnLayout like this:

ColumnLayout{
    LineField{
        label: "Name"
        text: addContext.newTenant.name
        onTextChanged: addContext.newTenant.name = text
    }
    LineField{
        label: "Father"
        text: addContext.newTenant.father
        onTextChanged: addContext.newTenant.father = text
    }
    LineField{
        label: "Mother"
        text: addContext.newTenant.mother
        onTextChanged: addContext.newTenant.mother = text
    }
    LineField{
        label: "Husband"
        text: addContext.newTenant.husband
        onTextChanged: addContext.newTenant.husband = text
    }
    AreaField{
        label: "Address"
        text: addContext.newTenant.address
        onTextChanged: addContext.newTenant.address = text
    }
    LineField{
        label: "NID"
        text: addContext.newTenant.nid
        onTextChanged: addContext.newTenant.nid = text
    }
    LineField{
        label: "Contact No."
        text: addContext.newTenant.contactNo
        onTextChanged: addContext.newTenant.contactNo = text
    }
    PathButton{
        pathData: Con.AddIcon
        Layout.alignment: Qt.AlignRight
        onClicked: addContext.addNewTenant()
        Layout.topMargin: 3
    }
}

I want TAB to shift focus to the subsequent Custom Component or the first Custom Component, if the last item, i.e. PathButton, inside the ColumnLayout is focused and want it to cycle until I take focus to another ColumnLayout like this by clicking.

One way I've found is the KeyNavigation.tab BUT I've a lot of these in my views so this will take quite a lot of time to give each Custom Component an id and put that id in KeyNavigation.tab to set focus manually.

How can I make this process automatic without id and KeyNavigation.tab?