CODEWITHSUNDEEP
dialogfocusqmltextfieldqt-quick
user3412372
user3412372

Reputation: 185

QML Dialog with focused textField

I am working on Qt quick application and I wanna open dialog. In this dialog window is TextField and I want to set focus to this textField after dialog is open. This code doesn't work.

function newFolder() {
    newFolderDialog.visible = true
    newFolderDialog.open()
}

Dialog {
    id: newFolderDialog
    title: "New folder"
    height: 150
    width: 300
    standardButtons: StandardButton.Ok | StandardButton.Cancel

    Column {
        anchors.fill: parent
        Text {
            text: "Name"
            height: 40
        }
        TextField {
            id: newFolderInput
            width: parent.width * 0.75
            focus: true
            onFocusChanged: console.log("Focus changed " + focus)
        }
    }

    onVisibilityChanged: {
        if(visible === true){
            newFolderInput.text = ""
            newFolderInput.focus = true
        }

    }
}

output to console is:

qml: Focus changed false
qml: Focus changed true
qml: Focus changed false

It look like, that somehow focus is changed after I set focus to textField

Upvotes: 10

Views: 14225

Answers (2)

너를 속였다
너를 속였다

Reputation: 1069

I had to use forceActiveFocus() method after opening the dialog

onClicked: {
    dialog.open()
    input.forceActiveFocus()
}

Upvotes: 3

BaCaRoZzo
BaCaRoZzo

Reputation: 7682

You don't need the function as it is written. From the docs of Dialog for the function open():

Shows the dialog to the user. It is equivalent to setting visible to true.

Given that (it's not the problem) it seems like the focus is continously contended between the dialog and the contained element. The more you open/close the Dialog, the more evaluations occurs. I cannot figure out why this happens, right now. However, you can easily solve the problem by (1) getting rid of onVisibilityChanged handler and (2) rewriting newFolder(). Final code rewritten:

ApplicationWindow {
    width: 360
    height: 300
    visible: true

    Button {
        anchors.centerIn: parent
        text: "click me!"
        onClicked: newFolder()
    }

    Dialog {
        id: newFolderDialog
        title: "New folder"
        height: 150
        width: 300
        standardButtons: StandardButton.Ok | StandardButton.Cancel
        focus: true    // Needed in 5.9+ or this code is NOT going to work!! 

        Column {
            anchors.fill: parent
            Text {
                text: "Name"
                height: 40
            }
            TextField {
                id: newFolderInput
                width: parent.width * 0.75
                focus: true
                onFocusChanged: console.log("Focus changed " + focus)
            }
        }
    }

    function newFolder() {
        newFolderDialog.open()
        newFolderInput.focus = true
    }
}

This way you first open the dialog and then set the focus to the proper Item.

Upvotes: 7

Related Questions