qml listView key navigation not working setting focus: true

[jfinn88]

I tried both those... still doesn't seem to get focus... I did find a slight work around by placing the key navigation above the listView item.... in my Component (delegate).

I check to see if the listView has active focus it returns true but when I comment out my key calls I can't navigate in list view. Documentation claims that focus just needs to be active to use key navigation...

below you see some commented out code that’s some of the different ways I have tired to get key navigation for the listView enabled

updated code:

//---User Event log Component---//
Item {
    visible: true
    id:userevent_item
    enabled: true
//    Component.onCompleted: {
//        listView.forceActiveFocus();
//        console.log("Outer Item onCompleted activeFocus: "+activeFocus)
//    }
    Rectangle {
        id: view_rect
        anchors.centerIn: parent
        width: 1100
        height: 600
        radius: 10
        border.width:4
        border.color: "black"
        layer.enabled: true
        enabled: true
        focus:true
 
        Component.onCompleted: {
            UserEventLog.init();
//            listView.forceActiveFocus();
//            console.log("viewRect onCompleted activeFocus: "+activeFocus)
        }
 
 
        FocusScope{
            anchors.fill:parent
            focus: true
            Label {
                id: userEventTitle_label
                color: "#000000"
                text: qsTr("User Event Log")
                anchors.top: parent.top
                anchors.topMargin: 5
                anchors.horizontalCenter: parent.horizontalCenter
                anchors.verticalCenter: parent.verticalCenter
                horizontalAlignment: Text.AlignLeft
                font.pointSize: 22
                font.bold: true
            }
 
            Component {
                id: msgDelegate
                Item {
                    id: active_eventMsg
                    focus: true
                    anchors.left: parent.left
                    anchors.leftMargin: 5
                    anchors.right: parent.right
                    anchors.rightMargin:5
                    height: 30
                    Keys.onDownPressed: listView.incrementCurrentIndex()
                    Keys.onUpPressed: listView.decrementCurrentIndex()
                    KeyNavigation.tab: userNameTextField
                    Component.onCompleted: {
                        listView.forceActiveFocus();
                        console.log("msgDelegate onCompleted activeFocus: "+listView.activeFocus)
                    }
                    Rectangle{
                        id: id_rect
                        anchors.top: parent.top
                        anchors.left: parent.left
                        anchors.leftMargin: 2
                        width: id_col.width
                        height: parent.height
                        color: "#00000000"
                        Text {
                            color: active_eventMsg.ListView.isCurrentItem ? "white" : "black"
                            anchors.fill: parent
                            verticalAlignment: Text.AlignVCenter
                            horizontalAlignment: Text.AlignLeft
                            text: id;
                            font.pixelSize: 18
                        }
                    }
                    Rectangle{
                        id: userName_rect
                        anchors.top: parent.top
                        anchors.left: id_rect.right
                        anchors.leftMargin: 2
                        width: userName_col.width
                        height: parent.height
                        color: "#00000000"
                        Text {
                            color: active_eventMsg.ListView.isCurrentItem ? "white" : "black"
                            anchors.fill: parent
                            anchors.leftMargin: 2
                            verticalAlignment: Text.AlignVCenter
                            horizontalAlignment: Text.AlignLeft
                            text: userName;
                            font.pixelSize: 18
                        }
                    }
                    Rectangle{
                        id: eventMsg_rect
                        anchors.top: parent.top
                        anchors.left: userName_rect.right
                        anchors.leftMargin: 2
                        width: eventMsg_col.width
                        height: parent.height
                        color: "#00000000"
                        Text {
                            color: active_eventMsg.ListView.isCurrentItem ? "white" : "black"
                            anchors.fill: parent
                            anchors.leftMargin: 2
                            verticalAlignment: Text.AlignVCenter
                            horizontalAlignment: Text.AlignLeft
                            text: eventMessage;
                            font.pixelSize: 18
                        }
                    }
                    Rectangle{
                        id: dateTime_rect
                        anchors.top: parent.top
                        anchors.left: eventMsg_rect.right
                        anchors.leftMargin: 2
                        width: dateTime_col.width
                        anchors.right: parent.right
                        height: parent.height
                        color: "#00000000"
                        Text {
                            color: active_eventMsg.ListView.isCurrentItem ? "white" : "black"
                            anchors.fill: parent
                            anchors.leftMargin: 2
                            verticalAlignment: Text.AlignVCenter
                            horizontalAlignment: Text.AlignLeft
                            text: dateTime;
                            font.pixelSize: 18
                        }
                    }
                }
            }
 
            Rectangle {
                id: listView_rect
                focus: true
                radius: 8
                anchors.top: eventMsg_panel.bottom
                anchors.topMargin: 2
                anchors.bottom: parent.bottom
                anchors.bottomMargin: 65
                anchors.left:parent.left
                anchors.leftMargin: 5
                anchors.right:parent.right
                anchors.rightMargin: 6
                //Keys.onPressed: console.log("key pressed activeFocus: ", activeFocus)
                //Keys.onDownPressed: listView.incrementCurrentIndex()
                //Keys.onUpPressed: listView.decrementCurrentIndex()
                border{
                    color: "black"
                    width: 3
                }
                ScrollView{
                    id: userEvent_scrollView
                    anchors.fill: parent
                    anchors.bottomMargin: 2
                    anchors.topMargin: 2.5
                    anchors.rightMargin: 2
                    anchors.leftMargin: 2.5
                    flickableItem.interactive: true
                    //Keys.onPressed: console.log("scrollView key pressed activeFocus: ", activeFocus)
                    //Keys.onDownPressed: listView.incrementCurrentIndex()
                    //Keys.onUpPressed: listView.decrementCurrentIndex()
                    ListView {
                        id: listView
                        focus: true
                        anchors.fill: parent
                        model: UserEventLog
                        delegate: msgDelegate
                        keyNavigationWraps: true
                        KeyNavigation.tab: userNameTextField
                        orientation : "Vertical"
                        snapMode: ListView.SnapToItem
                        boundsBehavior: Flickable.StopAtBounds
                        clip: true;
                        highlightMoveVelocity: 2000
                        highlight: Rectangle{
                            radius: 7;
                            color: "red"
                        }
                        Component.onCompleted: {
                            listView.forceActiveFocus();
                            console.log("listView onCompleted activeFocus: "+activeFocus)
                        }
                        //Keys.onPressed: console.log("listView key pressed activeFocus: ", activeFocus)
                        //Keys.onDownPressed: listView.incrementCurrentIndex()
                        //Keys.onUpPressed: listView.decrementCurrentIndex()
                    }
                }
            }
        }
    }
}
//---------------------------End of User Event Log Component-------------------------------//

//---User Event log Component---//
Item {
    visible: true
    id:userevent_item
    enabled: true
//    Component.onCompleted: {
//        listView.forceActiveFocus();
//        console.log("Outer Item onCompleted activeFocus: "+activeFocus)
//    }
    Rectangle {
        id: view_rect
        anchors.centerIn: parent
        width: 1100
        height: 600
        radius: 10
        border.width:4
        border.color: "black"
        layer.enabled: true
        enabled: true
        focus:true

        Component.onCompleted: {
            UserEventLog.init();
//            listView.forceActiveFocus();
//            console.log("viewRect onCompleted activeFocus: "+activeFocus)
        }


        FocusScope{
            anchors.fill:parent
            focus: true
            Label {
                id: userEventTitle_label
                color: "#000000"
                text: qsTr("User Event Log")
                anchors.top: parent.top
                anchors.topMargin: 5
                anchors.horizontalCenter: parent.horizontalCenter
                anchors.verticalCenter: parent.verticalCenter
                horizontalAlignment: Text.AlignLeft
                font.pointSize: 22
                font.bold: true
            }

            Component {
                id: msgDelegate
                Item {
                    id: active_eventMsg
                    focus: true
                    anchors.left: parent.left
                    anchors.leftMargin: 5
                    anchors.right: parent.right
                    anchors.rightMargin:5
                    height: 30
                    Keys.onDownPressed: listView.incrementCurrentIndex()
                    Keys.onUpPressed: listView.decrementCurrentIndex()
                    KeyNavigation.tab: userNameTextField
                    Component.onCompleted: {
                        listView.forceActiveFocus();
                        console.log("msgDelegate onCompleted activeFocus: "+listView.activeFocus)
                    }
                    Rectangle{
                        id: id_rect
                        anchors.top: parent.top
                        anchors.left: parent.left
                        anchors.leftMargin: 2
                        width: id_col.width
                        height: parent.height
                        color: "#00000000"
                        Text {
                            color: active_eventMsg.ListView.isCurrentItem ? "white" : "black"
                            anchors.fill: parent
                            verticalAlignment: Text.AlignVCenter
                            horizontalAlignment: Text.AlignLeft
                            text: id;
                            font.pixelSize: 18
                        }
                    }
                    Rectangle{
                        id: userName_rect
                        anchors.top: parent.top
                        anchors.left: id_rect.right
                        anchors.leftMargin: 2
                        width: userName_col.width
                        height: parent.height
                        color: "#00000000"
                        Text {
                            color: active_eventMsg.ListView.isCurrentItem ? "white" : "black"
                            anchors.fill: parent
                            anchors.leftMargin: 2
                            verticalAlignment: Text.AlignVCenter
                            horizontalAlignment: Text.AlignLeft
                            text: userName;
                            font.pixelSize: 18
                        }
                    }
                    Rectangle{
                        id: eventMsg_rect
                        anchors.top: parent.top
                        anchors.left: userName_rect.right
                        anchors.leftMargin: 2
                        width: eventMsg_col.width
                        height: parent.height
                        color: "#00000000"
                        Text {
                            color: active_eventMsg.ListView.isCurrentItem ? "white" : "black"
                            anchors.fill: parent
                            anchors.leftMargin: 2
                            verticalAlignment: Text.AlignVCenter
                            horizontalAlignment: Text.AlignLeft
                            text: eventMessage;
                            font.pixelSize: 18
                        }
                    }
                    Rectangle{
                        id: dateTime_rect
                        anchors.top: parent.top
                        anchors.left: eventMsg_rect.right
                        anchors.leftMargin: 2
                        width: dateTime_col.width
                        anchors.right: parent.right
                        height: parent.height
                        color: "#00000000"
                        Text {
                            color: active_eventMsg.ListView.isCurrentItem ? "white" : "black"
                            anchors.fill: parent
                            anchors.leftMargin: 2
                            verticalAlignment: Text.AlignVCenter
                            horizontalAlignment: Text.AlignLeft
                            text: dateTime;
                            font.pixelSize: 18
                        }
                    }
                }
            }

            Rectangle {
                id: listView_rect
                focus: true
                radius: 8
                anchors.top: eventMsg_panel.bottom
                anchors.topMargin: 2
                anchors.bottom: parent.bottom
                anchors.bottomMargin: 65
                anchors.left:parent.left
                anchors.leftMargin: 5
                anchors.right:parent.right
                anchors.rightMargin: 6
                //Keys.onPressed: console.log("key pressed activeFocus: ", activeFocus)
                //Keys.onDownPressed: listView.incrementCurrentIndex()
                //Keys.onUpPressed: listView.decrementCurrentIndex()
                border{
                    color: "black"
                    width: 3
                }
                ScrollView{
                    id: userEvent_scrollView
                    anchors.fill: parent
                    anchors.bottomMargin: 2
                    anchors.topMargin: 2.5
                    anchors.rightMargin: 2
                    anchors.leftMargin: 2.5
                    flickableItem.interactive: true
                    //Keys.onPressed: console.log("scrollView key pressed activeFocus: ", activeFocus)
                    //Keys.onDownPressed: listView.incrementCurrentIndex()
                    //Keys.onUpPressed: listView.decrementCurrentIndex()
                    ListView {
                        id: listView
                        focus: true
                        anchors.fill: parent
                        model: UserEventLog
                        delegate: msgDelegate
                        keyNavigationWraps: true
                        KeyNavigation.tab: userNameTextField
                        orientation : "Vertical"
                        snapMode: ListView.SnapToItem
                        boundsBehavior: Flickable.StopAtBounds
                        clip: true;
                        highlightMoveVelocity: 2000
                        highlight: Rectangle{
                            radius: 7;
                            color: "red"
                        }
                        Component.onCompleted: {
                            listView.forceActiveFocus();
                            console.log("listView onCompleted activeFocus: "+activeFocus)
                        }
                        //Keys.onPressed: console.log("listView key pressed activeFocus: ", activeFocus)
                        //Keys.onDownPressed: listView.incrementCurrentIndex()
                        //Keys.onUpPressed: listView.decrementCurrentIndex()
                    }
                }
            }
        }
    }
}
//---------------------------End of User Event Log Component-------------------------------//

To copy to clipboard, switch view to plain text mode