Search code examples
qtqmlqtquickcontrols

QT 5.7 QML How to control which Control gets the focus within a TabView

I'd like to arrange for a specific control to get the focus within a TabView Tab. Its seems that the first one gets the focus regardless of what I do. I have tried setting focus:false everywhere else but it doesn't work.

Consider the following code. I have a simple column containing two RadioButtons and a TextField. I'd like to arrange for the TextField to always get focus when the tab is selected, but it always goes to the first RadioButton

import QtQuick 2.7
import QtQuick.Controls 1.4
import QtQuick.Controls.Styles 1.4
import QtQuick.Layouts 1.3

ApplicationWindow
{
    visible: true
    width: 800
    height: 400

    TabView
    {
        anchors.fill: parent

        Tab { title: "tab1"; sourceComponent: foo }
        Tab { title: "tab2"; sourceComponent: foo }
    }

    Component
    {
        id: foo
        ColumnLayout
        {
            spacing: 32
            ExclusiveGroup { id: optionGroup }

            RadioButton
            {
                // i always get the focus!!
                exclusiveGroup: optionGroup
                text: "Click me"
                activeFocusOnPress: true
                focus: false
            }

            RadioButton
            {
                exclusiveGroup: optionGroup
                text: "No, click me!"
                activeFocusOnPress: true
                focus: false
            }

            TextField
            {
                // but i want the focus
                placeholderText: "type here"
                focus: true
            }
        }
    }
}

Press "tab2" to see this,

enter image description here

I tried forcing within TabView by adding,

onCurrentIndexChanged: getTab(currentIndex).item.forceActiveFocus()

But it makes no difference.

I've read the explanation of focus but it hasn't helped in this case.

Thanks for any suggestion or help,

Solution

  • Probably a bug. Try Qt Quick Controls 2.0 instead:

    import QtQuick 2.7
import QtQuick.Controls 2.0
import QtQuick.Layouts 1.3

ApplicationWindow {
    visible: true
    width: 800
    height: 400

    header: TabBar {
        id: bar
        width: parent.width
        TabButton {
            text: qsTr("tab1")
        }
        TabButton {
            text: qsTr("tab2")
        }
    }

    StackLayout {
        anchors.fill: parent
        currentIndex: bar.currentIndex

        ColumnLayout {
            id: columnLayout
            spacing: 32

            ButtonGroup {
                id: optionGroup
                buttons: columnLayout.children
            }

            RadioButton {
                text: "Click me"
            }

            RadioButton {
                text: "No, click me!"
            }

            TextField {
                placeholderText: "type here"
                focus: true
            }
        }
    }
}