I'm testing around ListView's section group feature to implement a
list view with section headers, but cannot figure out how to make the
section header get the keyboard focus. I did the following attempts
but none of my attempts work as intended:

1. Using ListView's `highlight` property with
`highlightFollowsCurrentItem`, result: highlight will only appear on
model items and can be moved via arrow keys, section header won't get
keyboard focus whatever focus is set to true or false, whatever
pressing tab or arrow keys
2. Using `activeFocus` to manually check and display a component as
highlighted, result: section header still won't get focus when
pressing tab.
3. Setting focusPolicy to StrongFocus, result: pressing tab or arrow
key still won't focus the section header
4. Based on 2+3, and forcing focus on item getting clicked. result: It
will get focus on clicked, pressing arrow key will move the focus to
other items, and not be able to move the focus back to section header
unless we use mouse to click the section header again.

Question: what's the intended usage to make the ListView section
header be able to get keyboard focus, just like other ListView items?

Thanks!
Gary.

Following is a sample test file that can be used to quickly test the behavior:

// qmlpreview qml listviewtest.qml
pragma ComponentBehavior: Bound;
import QtQuick
import QtQuick.Controls
import QtQuick.Layouts
import QtQuick.Dialogs
import Qt.labs.qmlmodels

ApplicationWindow {
    visible: true
    width: 600
    height: 500
    title: activeFocusItem + " " + (activeFocusItem ?
activeFocusItem.Accessible.name : "")

    Pane {
        anchors.fill: parent
        focus: true

        ListView {
            id: listView
            anchors.fill: parent
            focus: true

            section.property: "category"
            section.criteria: ViewSection.FullString
            section.delegate: ItemDelegate {
                required property string section
                focus: true
                focusPolicy: Qt.StrongFocus
                width: ListView.view.width
                text: section
                Rectangle {
                    border.color: parent.activeFocus ? "yellow" : "green"
                    color: "transparent"
                    anchors.fill: parent
                    z: 10
                }
                onClicked: function() {
                    console.log(focusPolicy)
                }
            }

            model: ListModel {
                ListElement { name: "Item 1"; category: "A"; }
                ListElement { name: "Item 2"; category: "A"; }
                ListElement { name: "Item 3"; category: "A"; }
                ListElement { name: "Item 4"; category: "B"; }
                ListElement { name: "Item 5"; category: "B"; }
            }

            delegate: ItemDelegate {
                required property string name
                width: ListView.view.width
                text: name
                Rectangle {
                    border.color: parent.activeFocus ? "yellow" : "green"
                    color: "transparent"
                    anchors.fill: parent
                    z: 10
                }
                onClicked: function() {
                    focus = true
                    console.log(focusPolicy)
                }
            }
        }
    }
}
_______________________________________________
Interest mailing list
[email protected]
https://lists.qt-project.org/listinfo/interest

Reply via email to