qml/ExpandGridView: Update focus implementation

modules/gui/qt/widgets/qml/ExpandGridView.qml

@@ -49,6 +49,7 @@ FocusScope {
     property var model
 
     property int currentIndex: 0
+
     property alias contentHeight: flickable.contentHeight
     property alias contentWidth: flickable.contentWidth
     property alias contentX: flickable.contentX
@@ -65,6 +66,9 @@ FocusScope {
     property int expandIndex: -1
     property int _newExpandIndex: -1
     property int _expandItemVerticalSpace: 0
+
+    property int _currentFocusReason: Qt.OtherFocusReason
+
     on_ExpandItemVerticalSpaceChanged: {
         if (expandItem) {
             expandItem.visible = root._expandItemVerticalSpace - root.verticalSpacing > 0
@@ -96,11 +100,21 @@ FocusScope {
 
     Accessible.role: Accessible.Table
 
-    function setCurrentItemFocus() {
-        if (!model || model.count === 0 || currentIndex === -1)
-            return
-        positionViewAtIndex(currentIndex, ItemView.Contain)
-        flickable.setCurrentItemFocus()
+    function setCurrentItemFocus(reason) {
+        if (!model || model.count === 0 || currentIndex === -1 || expandIndex !== -1)
+            return;
+
+        _currentFocusReason = reason;
+
+        if (_containsItem(currentIndex))
+            _getItem(currentIndex).forceActiveFocus(reason);
+        else
+            // NOTE: By default we want the focus on the flickable. This is useful when no item is
+            //       instanciated.
+            flickable.forceActiveFocus(reason);
+
+        // NOTE: We make sure the current item is fully visible.
+        positionViewAtIndex(currentIndex, ItemView.Contain);
     }
 
     function switchExpandItem(index) {
@@ -186,7 +200,9 @@ FocusScope {
                 root._getItem(currentIndex).focus = false
             currentIndex = -1
         }
-        root.forceActiveFocus()
+
+        // NOTE: We make sure to clear the keyboard focus.
+        flickable.forceActiveFocus();
     }
 
     function rightClickOnItem(index) {
@@ -254,10 +270,11 @@ FocusScope {
             throw "wrong child: " + id
 
         //theses properties are always defined in Item
-        item.focus = (id === root.currentIndex) && (root.expandIndex === -1)
         item.x = x
         item.y = y
         item.selected = delegateModel.isSelected(model.index(id, 0))
+
+        return item
     }
 
     function _recycleItem(id, x, y) {
@@ -268,12 +285,13 @@ FocusScope {
         item.index = id
         item.model = model.getDataAt(id)
         item.selected = delegateModel.isSelected(model.index(id, 0))
-        item.focus = (id === root.currentIndex) && (root.expandIndex === -1)
         item.x = x
         item.y = y
         item.visible = true
 
         root._setItem(id, item)
+
+        return item
     }
 
     function _createItem(id, x, y) {
@@ -281,26 +299,35 @@ FocusScope {
                         selected: delegateModel.isSelected(model.index(id, 0)),
                         index: id,
                         model: model.getDataAt(id),
-                        focus: (id === root.currentIndex) && (root.expandIndex === -1),
                         x: x,
                         y: y,
                         visible: true
                     });
         if (item === undefined)
             throw "wrong unable to instantiate child " + id
+
         root._setItem(id, item)
+
+        return item
     }
 
     function _setupChild(id, ydelta) {
         var pos = root.getItemPos(id)
 
-        if (root._containsItem(id)) {
-            _repositionItem(id, pos[0], pos[1] + ydelta)
-        }  else if (_unusedItemList.length > 0) {
-            _recycleItem(id, pos[0], pos[1] + ydelta)
-        } else {
-            _createItem(id, pos[0], pos[1] + ydelta)
-        }
+        var item;
+
+        if (root._containsItem(id))
+            item = _repositionItem(id, pos[0], pos[1] + ydelta)
+        else if (_unusedItemList.length > 0)
+            item = _recycleItem(id, pos[0], pos[1] + ydelta)
+        else
+            item = _createItem(id, pos[0], pos[1] + ydelta)
+
+        // NOTE: This makes sure we have the proper focus reason on the GridItem.
+        if (activeFocus && currentIndex === item.index && expandIndex === -1)
+            item.forceActiveFocus(_currentFocusReason)
+        else
+            item.focus = false
     }
 
     function _refreshData( iMin, iMax ) {
@@ -404,13 +431,11 @@ FocusScope {
             sourceComponent: headerDelegate
             focus: item.focus
             onFocusChanged: {
-                if (focus) {
-                    //when we gain the focus ensure the widget is fully visible
-                    animateFlickableContentY(0)
-                } else {
-                    //when we lose the focus restore the focus on the current grid item
-                    flickable.setCurrentItemFocus()
-                }
+                if (!focus)
+                    return;
+
+                // when we gain the focus ensure the widget is fully visible
+                animateFlickableContentY(0);
             }
             onLoaded: {
                 item.x = 0
@@ -628,8 +653,7 @@ FocusScope {
             to: 0
             onStopped: {
                 expandIndex = -1
-                flickable.setCurrentItemFocus()
-                root.positionViewAtIndex(root.currentIndex, ItemView.Contain)
+                setCurrentItemFocus(Qt.OtherFocusReason)
                 if (_newExpandIndex !== -1)
                     flickable.expand()
             }
@@ -643,16 +667,6 @@ FocusScope {
             duration: VLCStyle.duration_slow
             from: 0
         }
-
-        function setCurrentItemFocus() {
-            if (expandIndex !== -1)
-                return
-            var child
-            if (root._containsItem(currentIndex))
-                child = root._getItem(currentIndex)
-            if (child !== undefined)
-                child.focus = true
-        }
     }
 
     PropertyAnimation {
@@ -671,7 +685,6 @@ FocusScope {
     onCurrentIndexChanged: {
         if (expandIndex !== -1)
             retract()
-        flickable.setCurrentItemFocus()
         positionViewAtIndex(root.currentIndex, ItemView.Contain)
     }
 
@@ -711,10 +724,17 @@ FocusScope {
         }
 
         if (newIndex !== -1 && newIndex !== currentIndex) {
-            event.accepted = true
-            var oldIndex = currentIndex
-            currentIndex = newIndex
-            root.selectionUpdated(event.modifiers, oldIndex, newIndex)
+            event.accepted = true;
+
+            var oldIndex = currentIndex;
+            currentIndex = newIndex;
+            root.selectionUpdated(event.modifiers, oldIndex, newIndex);
+
+            // NOTE: We make sure we have the proper visual focus on components.
+            if (oldIndex < currentIndex)
+                setCurrentItemFocus(Qt.TabFocusReason);
+            else
+                setCurrentItemFocus(Qt.BacktabFocusReason);
         }
 
         if (!event.accepted) {