Tab navigation with ListView inside SwipeView

Suli Sahne

Hello,

I have a problem with the tab navigation.

In my test application I have a Button and a ListView below it. What I want is a circular tab order. I want to be able to navigate from top to bottom by pressing the tab key and from bottom to top by pressing backtab.

If the last item in the list has active focus and tab is pressed, jump to the button
If the button has active focus and tab is pressed, jump to the first item in the list
If the button has active focus and backtab is pressed, jump to the last item in the list

If just a simple ListView is used this is no problem:

import QtQuick 2.15
import QtQuick.Window 2.15
import QtQuick.Controls 2.12
import QtQuick.Layouts 1.12

Window {
    width: 640
    height: 480
    visible: true
    title: qsTr("Hello World")
    ColumnLayout {
        anchors.fill: parent
        spacing: 5
        Button {
            id: button
            focus: true
            text: activeFocus ? "activeFocus" : "inactiveFocus"
            Layout.fillWidth: true
        }
        ListView {
            id: list
            model: 5
            spacing: 5
            Layout.fillHeight: true
            Layout.fillWidth: true
            delegate: Rectangle {
                height: 50
                width: parent.width
                activeFocusOnTab: true
                color: activeFocus ? "red" : "grey"
                Text {
                    text: index
                    anchors.centerIn: parent
                }
            }
        }
    }
}

However, the ListView must now be used within a SwipeView (to keep things simple, I just use one ListView). Now the ListView remembers the last item which had active focus and uses it whenever the active focus changes from button to list.

import QtQuick 2.15
import QtQuick.Window 2.15
import QtQuick.Controls 2.12
import QtQuick.Layouts 1.12

Window {
    width: 640
    height: 480
    visible: true
    title: qsTr("Hello World")
    ColumnLayout {
        anchors.fill: parent
        spacing: 5
        Button {
            id: button
            focus: true
            text: activeFocus ? "activeFocus" : "inactiveFocus"
            Layout.fillWidth: true
        }
        SwipeView {
            id: swipe
            Layout.fillHeight: true
            Layout.fillWidth: true
            ListView {
                id: list
                model: 5
                spacing: 5
                delegate: Rectangle {
                    height: 50
                    width: parent.width
                    activeFocusOnTab: true
                    color: activeFocus ? "red" : "grey"
                    Text {
                        text: index
                        anchors.centerIn: parent
                    }
                }
            }
        }
    }
}

Does anyone have an idea what is going on?