Focusable Qml Components (Focus My Control On Tab) - qt

Question

i have created a custom button in qml, which i want to focus on pressing 'tab', i mean "jump to it on pressing tab if its on top of queue" by default qml has this functionality on button itself and some of other controls too but what about new components which does not exist,i saw a "FocusScope" control of qml but there is no documentation of using it and i am not sure how can i implement it, here is my control :
import QtQuick 2.4
Item {
id: button
width: innerText.width + 10
height: 30
property alias text: innerText.text;
property alias font: innerText.font;
property color color: "#00171f"
property color hoverColor: "#00395f"
property color pressColor: "#3E65FF"
property int fontSize: 12
property int borderWidth: 0
property int borderRadius: 2
property bool highlighted : true
onEnabledChanged: state = ""
signal clicked
property var background
Rectangle {
id: rectangleButton
anchors.fill: button
radius: borderRadius
color: button.enabled ? button.color : "grey"
border.width: borderWidth
border.color: "black"
Text {
id: innerText
font.pointSize: fontSize
font.family: "B Nazanin"
color: "white"
anchors.centerIn: rectangleButton
}
}
//change the color of the button in differen button states
states: [
State {
name: "Hovering"
PropertyChanges {
target: rectangleButton
color: hoverColor
}
},
State {
name: "Pressed"
PropertyChanges {
target: rectangleButton
color: pressColor
}
}
]
//define transmission for the states
transitions: [
Transition {
from: ""; to: "Hovering"
ColorAnimation { duration: 200 }
},
Transition {
from: "*"; to: "Pressed"
ColorAnimation { duration: 10 }
},
Transition {
from: "*"
to: ""
ColorAnimation { duration: 200 }
}
]
//Mouse area to react on click events
MouseArea {
hoverEnabled: true
anchors.fill: button
onEntered: { button.state='Hovering'}
onExited: { button.state=''}
onClicked: { button.clicked();}
onPressed: { button.state="Pressed" }
onReleased: {
if (containsMouse)
button.state="Hovering";
else
button.state="";
}
}
}

Answer 1

It looks like you are simply looking for the activeFocusOnTab property:
Item {
id: button
activeFocusOnTab: true
// ...
}