Passing key focus from a component to a sub component

Viewed 33

Problem: How do I change the focus from the cornerButton once it is active? Once I navigate up from messageButton to the cornerButton I am not able to navigate back down from there to messageButton.

I thought about creating a property attributes for messageButton in simplePop.qml.... Any thoughts? I think my main issue is that I don't fully understand focus and focuscope

simplePop.qml

   Popup {
        id: root  
        property alias cornerButton: cornerButton
        property var messageButton

         Button {
             id: cornerButton
             visible: true
             focus: true
             onClicked: root.closeButtonClicked()
              
             Keys.onReturnPressed: {
                 clicked()
             }
             Keys.onEscapePressed: {
                 hide()
             }

             Keys.onDownPressed: {
                 cornerButtonExited()
             }  
             
             KeyNavigation.down: messageButton
    }

This is just a snippet of code to convey my issue. I cannot produce a working example from the larger project. I hope this helps with understanding my issue.

This is simplePop.qml

    Popup {
        id: root  
        property alias cornerButton: cornerButton
        
         Button {
             id: cornerButton
             visible: true
             onClicked: root.closeButtonClicked()
             
             Keys.onReturnPressed: {
                 clicked()
             }
             Keys.onEscapePressed: {
                 hide()
             }
 
             Keys.onDownPressed: {
                 cornerButtonExited()
             }  
         }
    }

This is main.qml

 Window {
        visible: true
        width: 640
        height: 480
        title: qsTr("Hello World")

        simplePop {
    
         Row {
            id: buttonsRow
            anchors.horizontalCenter: parent.horizontalCenter
            anchors.bottom: parent.bottom
    
            UniButton {
                id: messageButton
                anchors.top: parent.top
                onClicked: {
                    hide();
                }
                Keys.onReturnPressed: clicked()
                KeyNavigation.up: cornerButton
                KeyNavigation.down: callButton.enabled ? callButton : null
                KeyNavigation.left: cornerButton
                KeyNavigation.right: callButton.enabled ? callButton : null
                Keys.onPressed: {
                    if (event.key === Qt.Key_F2 && callButton.enabled) {
                        callButton.focus = true
                    }
                }
            }
    
            UniButton {
                id: callButton
                anchors.top: parent.top
                onClicked: {
                    hide();
                }
                Keys.onReturnPressed: clicked()
                KeyNavigation.up: messageButton : null
                KeyNavigation.left: messageButton
                Keys.onPressed: {
                    if (event.key === Qt.Key_F1) {
                        messageButton.focus = true
                    }
                }
            }
        }
    }
}
0 Answers
Related