qml listView key navigation not working setting focus: true

not able to navigate through list view using up/down arrows.... as far as I can tell setting focus: true should enable keyboard navigation?

Code:

---

Component {
            id: msgDelegate
            Item {
                id: active_eventMsg
                anchors.left: parent.left
                anchors.leftMargin: 5
                anchors.right: parent.right
                anchors.rightMargin:5
                height: 30
                Keys.onUpPressed: listView.incrementCurrentIndex()
                Keys.onDownPressed: listView.decrementCurrentIndex()
                MouseArea {
                    anchors.fill: parent
                    onClicked: listView.currentIndex = index
                }
                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
            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
            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
                ListView {
                    id: listView
                    anchors.fill: parent
                    model: UserEventLog
                    delegate: msgDelegate
                    keyNavigationWraps: true
                    //KeyNavigation: true
 
                    //Keys.onUpPressed: listView.incrementCurrentIndex()
                    //Keys.onDownPressed: listView.decrementCurrentIndex()
 
                    highlight: Rectangle{
                        width: parent.width
                        radius: 7;
                        color: "red"
                    }
                    focus: true
                    orientation : "Vertical"
                    snapMode: ListView.SnapToItem
                    boundsBehavior: Flickable.StopAtBounds
                    clip: true;
                }
            }
        }

---

Yes, that should work.

But maybe something else has the active focus.
Try forceActiveFocus() on the list view, e.g. in Component.onCompleted

Cheers,
_

okay I was wondering what was going on...

I'm confused where to call this in my code... listView loads the component so would you call it in list view?

Code:

---

Component.onCompleted: {
                        listView.forceActiveFocus()
                    }

---

update: not sure where to place onCompleted signal

Code:

---

Component {
            id: msgDelegate
            Item {
                id: active_eventMsg
                anchors.left: parent.left
                anchors.leftMargin: 5
                anchors.right: parent.right
                anchors.rightMargin:5
                height: 30
                Component.onCompleted:{
                    listView.forceActiveFocus()
                }
                MouseArea {
                    anchors.fill: parent
                    onClicked: {
                        listView.currentIndex = index
                        //listView.forceActiveFocus()
                        console.log("active focus: "+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
            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
            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
                ListView {
                    id: listView
                    anchors.fill: parent
                    model: UserEventLog
                    delegate: msgDelegate
                    keyNavigationWraps: true
                    highlight: Rectangle{
                        width: parent.width
                        radius: 7;
                        color: "red"
                    }
                    focus: true
                    orientation : "Vertical"
                    snapMode: ListView.SnapToItem
                    boundsBehavior: Flickable.StopAtBounds
                    clip: true;
                }
//                Component.onCompleted:{
//                    listView.forceActiveFocus()
//                }
            }
        }

---

I would put it either in the outermost item, as you have, or into the ListView itself.

Cheers,
_

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:

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-------------------------------//

---

only thing I cant think of that might mess with it is I have to mess with the focus in my textFIelds and buttons that controll the list view ... I cant fit all my code in one post my qml file is too large

Code:

---

RowLayout {
    id: row1
    y: 545
    anchors.horizontalCenter: parent.horizontalCenter
    anchors.bottom: parent.bottom
    anchors.left: parent.left
    anchors.leftMargin: 10
    anchors.rightMargin: 5
    anchors.bottomMargin: 5
    spacing: 10
    width: 1032
    height: 50;
    Label {
        id: userNameLabel
        width: 35
        height: 25
        color: "white";
        text: qsTr("User Name")
        font.pointSize: 12
    }
    TextField {
        id: userNameTextField
        style: TextFieldUserLogStyle {}
        placeholderText: qsTr("User Name")
        KeyNavigation.tab: beginDateTextField
        Keys.onReturnPressed: {
            beginDateTextField.focus = true;
            beginDateTextField.selectAll();
        }
    }
    Label {
        id: beginDateTextLabel
        width: 35
        height: 25
        color: "white";
        text: qsTr("Begin Date")
        font.pointSize: 12
    }
    TextField {
        id: beginDateTextField
        style: TextFieldUserLogStyle {}
        placeholderText: qsTr("yyyy-mm-dd")
        KeyNavigation.tab: endDateTextField
        Keys.onReturnPressed: {
            endDateTextField.forceActiveFocus();
            endDateTextField.selectAll();
        }
        onFocusChanged: {
            if(calendarRect1.visible == false){
                calendarRect1.visible = true
                beginDateTextField.focus = true;
                beginDateTextField.selectAll();
            }
        }
 
        Image{
            id: beginDateImage
            width: 30
            height: 40
            anchors.right: parent.right
            anchors.verticalCenter: parent.verticalCenter
            anchors.rightMargin: 3
            source:"Calendar3.png"
            MouseArea {
                anchors.fill:parent
                onClicked: {
                    if(calendarRect1.visible == false){
                        calendarRect1.visible = true
                    }
                    else if(calendarRect1.visible == true){
                        calendarRect1.visible = false
                    }
                }
            }
        }
    }
    Label {
        id: endDateTextLabel
        width: 35
        height: 25
        color: "white";
        text: qsTr("End Date")
        font.pointSize: 12
    }
    TextField {
        id: endDateTextField
        style: TextFieldUserLogStyle {}
        placeholderText: qsTr("yyyy-mm-dd")
        KeyNavigation.tab: searchBtn
        Keys.onReturnPressed: {
            action_search.trigger();
            endDateTextField.focus = false;
        }
        onFocusChanged: {
            if(calendarRect2.visible == false){
                calendarRect2.visible = true
                endDateTextField.focus = true;
                endDateTextField.selectAll();
            }
        }
        Image{
            id: endDateImage
            width: 30
            height: 40
            anchors.right: parent.right
            anchors.verticalCenter: parent.verticalCenter
            anchors.rightMargin: 3
            source:"Calendar3.png"
            MouseArea {
                anchors.fill:parent
                onClicked: {
                    if(calendarRect2.visible == false){
                        calendarRect2.visible = true
                    }
                    else if(calendarRect2.visible == true){
                        calendarRect2.visible = false
                    }
                }
            }
        }
    }
    Button {
        id: searchBtn
        text: qsTr("Search")
        action: action_search
        opacity:  !action.enabled ? .3 : 1.0
        KeyNavigation.tab: resetBtn
        //---Sets button Formatting---//
        style: ButtonStyle {
            background: Rectangle {
                implicitWidth: 90
                implicitHeight: 45
                anchors.fill:parent
                radius: 8
                color: "#f9f9f9"
                border.color: control.activeFocus ? "yellow" : "#242424"
                border.width: control.activeFocus ? 4 : 1
                //---Changes butotn color when pressed--//
                gradient: Gradient {
                    GradientStop { position: 0 ; color: control.pressed ? "#ccc" : "#eee" }
                    GradientStop { position: 1 ; color: control.pressed ? "#aaa" : "#ccc" }
                }
                //---Sets button Image---//
                Image{
                    width: 24
                    height: 24
                    anchors.verticalCenter: parent.verticalCenter
                    anchors.left: parent.left
                    anchors.leftMargin: 5
                    source:"button_ok.png"
                }
            }
        }
    }
    Button {
        id: resetBtn
        text: qsTr("Reset")
        action: action_reset
        opacity:  !action.enabled ? .3 : 1.0
        KeyNavigation.tab: exitBtn
        //---Sets button Formatting---//
        style: ButtonStyle {
            background: Rectangle {
                implicitWidth: 90
                implicitHeight: 45
                anchors.fill:parent
                radius: 8
                color: "#f9f9f9"
                border.color: control.activeFocus ? "yellow" : "#242424"
                border.width: control.activeFocus ? 4 : 1
                //---Changes butotn color when pressed--//
                gradient: Gradient {
                    GradientStop { position: 0 ; color: control.pressed ? "#ccc" : "#eee" }
                    GradientStop { position: 1 ; color: control.pressed ? "#aaa" : "#ccc" }
                }
                //---Sets button Image---//
                Image{
                    width: 24
                    height: 24
                    anchors.verticalCenter: parent.verticalCenter
                    anchors.left: parent.left
                    anchors.leftMargin: 5
                    source:"return.png"
                }
            }
        }
    }
    Button {
        id: exitBtn
        text: qsTr("Exit")
        action: action_exit
        //---Opacity Greys out button---//
        opacity:  !action.enabled ? .3 : 1.0
        KeyNavigation.tab: userNameTextField
        //---Sets button Formatting---//
        style: ButtonStyle {
            background: Rectangle {
                implicitWidth: 90
                implicitHeight: 45
                anchors.fill:parent
                radius: 8
                color: "#f9f9f9"
                border.color: control.activeFocus ? "yellow" : "#242424"
                border.width: control.activeFocus ? 4 : 1
                //---Changes butotn color when pressed--//
                gradient: Gradient {
                    GradientStop { position: 0 ; color: control.pressed ? "#ccc" : "#eee" }
                    GradientStop { position: 1 ; color: control.pressed ? "#aaa" : "#ccc" }
                }
                //---Sets button Image---//
                Image{
                    width: 24
                    height: 24
                    anchors.verticalCenter: parent.verticalCenter
                    anchors.left: parent.left
                    anchors.leftMargin: 5
                    source:"button_cancel.png"
                }
            }
        }
    }
}
}

---

---

Added after 1:

Here is what I have come up with as a work around...

I'm guess this is a bug with listView or something as I can not get key navigation enabled on the listView as described in the document by simply enabling focus on listView. I have the focus on the listView and key nav doesn't work

updated code:

Code:

---

//---Delegate Component for listView---//
            Component {
                id: msgDelegate
                Item {
                    id: active_eventMsg
                    anchors.left: parent.left
                    anchors.leftMargin: 5
                    anchors.right: parent.right
                    anchors.rightMargin:5
                    height: 30
 
                    //---Key Navigation Work Around (listView focus issue)---//
                    Keys.onDownPressed: listView.incrementCurrentIndex()
                    Keys.onUpPressed: listView.decrementCurrentIndex()
                    KeyNavigation.tab: userNameTextField
 
                    //---Highlight Functionality---//
                    MouseArea {
                        anchors.fill: parent
                        onClicked: {
                            listView.currentIndex = index
                        }
                    }
                    //---Rect display model data in listView---//
                    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
                        }
                    }
                }
            }
 
            //---Rect for listView---//
            Rectangle {
                id: listView_rect
                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
                border{
                    color: "black"
                    width: 3
                }
                //---Adds ScrollBars---//
                ScrollView{
                    id: userEvent_scrollView
                    anchors.fill: parent
                    anchors.bottomMargin: 2
                    anchors.topMargin: 2.5
                    anchors.rightMargin: 2
                    anchors.leftMargin: 2.5
                    flickableItem.interactive: true
                    ListView {
                        id: listView
                        focus: true
                        anchors.fill: parent
                        model: UserEventLog
                        delegate: msgDelegate
                        keyNavigationWraps: true
                        KeyNavigation.tab: {
                            //listView.focus = false;
                            //userNameTextField.focus = true;
                            //userNameTextField.selectAll();
                            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 activeFocus: "+activeFocus)
                        }
                    }
                }
            }

---

Hello!

I had a similar issue and the solution was to set "focus" of the ScrollView to "true". It is an old thread and maybe the property will not affect an application of an older Qt version but I have copied the code and tried to use the property with the Qt 5.6 version and succeded.

Here is your code. It is changed a bit.

Code:

---

//---Delegate Component for listView---//
                Component {
                    id: msgDelegate
                    Item {
                        id: active_eventMsg
                        anchors.left: parent.left
                        anchors.leftMargin: 5
                        anchors.right: parent.right
                        anchors.rightMargin:5
                        height: 30
 
                        //---Key Navigation Work Around (listView focus issue)---//
                        //Keys.onDownPressed: listView.incrementCurrentIndex()
                        //Keys.onUpPressed: listView.decrementCurrentIndex()
                        //KeyNavigation.tab: userNameTextField
 
                        //---Highlight Functionality---//
                        MouseArea {
                            anchors.fill: parent
                            onClicked: {
                                listView.currentIndex = index
                            }
                        }
                        //---Rect display model data in listView---//
                        Rectangle{
                            id: id_rect
                            anchors.top: parent.top
                            anchors.left: parent.left
                            anchors.leftMargin: 2
                            width: 100
                            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: 100
                            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: 100
                            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: 100
                            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
                            }
                        }
                    }
                }
 
                //---Rect for listView---//
                Rectangle {
                    id: listView_rect
                    radius: 8
                    anchors.top: parent.top
                    anchors.topMargin: 2
                    anchors.bottom: parent.bottom
                    anchors.bottomMargin: 65
                    anchors.left:parent.left
                    anchors.leftMargin: 5
                    anchors.right:parent.right
                    anchors.rightMargin: 6
                    border{
                        color: "black"
                        width: 3
                    }
                    //---Adds ScrollBars---//
                    ScrollView{
                        id: userEvent_scrollView
                        anchors.fill: parent
                        anchors.bottomMargin: 2
                        anchors.topMargin: 2.5
                        anchors.rightMargin: 2
                        anchors.leftMargin: 2.5
                        focus: true
                        flickableItem.interactive: true
                        ListView {
                            id: listView
                            focus: true
                            anchors.fill: parent
                            model: 5
                            delegate: msgDelegate
                            keyNavigationWraps: true
                            //KeyNavigation.tab: {
                                //listView.focus = false;
                                //userNameTextField.focus = true;
                                //userNameTextField.selectAll();
                                //userNameTextField
                            //}
 
                            orientation : "Vertical"
                            snapMode: ListView.SnapToItem
                            boundsBehavior: Flickable.StopAtBounds
                            clip: true;
                            highlightMoveVelocity: 2000
                            highlight: Rectangle{
                                radius: 7;
                                color: "red"
                            }
                            Keys.onDownPressed: listView.incrementCurrentIndex()
                            Keys.onUpPressed: listView.decrementCurrentIndex()
                            Component.onCompleted: {
                                //listView.forceActiveFocus();
                                console.log("listView activeFocus: "+activeFocus)
                            }
                        }
                    }
                }
 
}

---