QML Dialog with focused textField

Question

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

This works for me in Qt 5.5. The focus goes to the TextField and there are four lines in the console (false, true, false, true). — pepan, Feb 08 '16 at 10:57

BaCaRoZzo · Accepted Answer · 2017-09-11T07:27:45.160

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.

Your solution didnt help. It show dialog correctly but not add focus to textField — user3412372, Dec 02 '14 at 19:32
It works for me, on 5.3 and 5.4. I've edited with my full test code (which is your code plus a button...). Maybe there's something about your setting which is missing? — BaCaRoZzo, Dec 02 '14 at 20:48
Yes it work! My bad was, that i wrote `newFolderInput.visible = true` instead of `newFolderInput.focus = true` Thank you a lot! — user3412372, Dec 02 '14 at 20:59
In **QT 5.9** above solution works only if the `focus` is set to `true` in the dialog initialization. `Dialog{focus : true}` — pra7, Sep 10 '17 at 15:28
@pra7 I guess they solved some sort of bug inside dialog? They are more or less discontinued in favour of QC2 and platform lab controls. It's a long time since the last time I've used the dialogs libs. I'm going to add the line of code, thanks for pointing that out. :) — BaCaRoZzo, Sep 11 '17 at 07:25

score 3 · Answer 2 · answered Oct 05 '20 at 09:42

3

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

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

answered Oct 05 '20 at 09:42

너를 속였다

899
11
26

QML Dialog with focused textField

2 Answers2