KeyNavigation in ListView (FocusScope)

schwaer

We use keyNavigation in a ListView, using a FocusScope. If one element in the ListView is set to “disabled” we expect, the active Focus to skip over the disabled element!

For example:

[] is activeFocus

is enabled: true
- is diabled (enabled:false)
# is focus: true

Initial ListView: (fig. 1)

[Element 1]
```
Element 2
```
```
Element 3
```

- Element 4

```
Element 5
```

Key.down (1): (fig. 2)

```
Element 1 
```
[Element 2]
```
Element 3
```

- Element 4

```
Element 5
```

Key.down (2): (fig. 3)

```
Element 1 
```
```
Element 2
```
[Element 3]

- Element 4

```
Element 5
```

Key.down (3): (fig. 4)

```
Element 1 
```
```
Element 2
```
```
Element 3
```

- # Element 4

```
Element 5
```

Key.down (4): (fig. 5)

```
Element 1 
```
```
Element 2
```
```
Element 3
```

- Element 4

[Element 5]

We expected that on Key.down (fig. 3 to fig. 4) the Element 5 will get the focus and the active Focus.
Actually that’s not happening. After that operation the ActiveFocus is lost It seems, the ActiveFocus is simply vanishing, no element seem to be focused anymore.
If we use the tab key it works like expected, the active focus skips Element 4 and went directly the Element 5

Example Code:
…

@ ListModel {
id: demoModel
ListElement { name: "Element 1"}
ListElement { name: "Element 2"}
ListElement { name: "Element 3"}
ListElement { name: "Element 4"}
ListElement { name: "Element 5"}
}

ListView {
width: 100
height: 250
id: demolistView
model: demoModel
delegate: Rectangle {
id: demobutton
width: 100
height: 50
enabled: index === 2 ? false : true // disable element 3
color: "orange"

  // make active Focus visible with red border
  border.width: activeFocus? 2: 0
  border.color: activeFocus? "red": "transparent"

  Text{
    id: demobuttonlabel
    anchors.fill: parent
    text: name
    color: enabled ? "black" : "grey" // diasbled Text is grey
    verticalAlignment: Text.AlignVCenter
    horizontalAlignment: Text.AlignHCenter
  }

  MouseArea {
    anchors.fill: parent
    onClicked: {
      demobutton.forceActiveFocus() //Set activeFocus on clicked element
    }
  } // MouseArea
} // Delegate

} // ListView@

KeyNavigation in ListView (FocusScope)

[Element 1]

[Element 2]

[Element 3]

[Element 5]