Can't make Dialog work properly

[nPellejero]

Hi, I have cloned the dev repository, and installed successfully qml-material under Qt 5.7. The demo works great. But when I use Dialog component exactly as in the demo but on an ApplicationWindow, it doesn't work properly. When I click outside the dialog it doesn't close, and more important the buttons appear to be above the dialog. Here is the code (almost dialogDemo.qml) and a screenshot:

`import QtQuick 2.4
import QtQuick.Controls 1.3 as QuickControls
import Material 0.2
import Material.Extras 0.1
ApplicationWindow{
visible: true
width: 640
height: 480
Item {
anchors.fill: parent
Dialog {
id: alertNoTitleBar
width: 300
text: "Discard draft?"
hasActions: true
positiveButtonText: "discard"
negativeButtonText: "cancel"
}

    Dialog {
        id: alertWithTitleBar
        width: 300
        title: "Use Google's location service?"
        text: "Let Google help apps determine location. This means sending anonymous location data to Google, even when no apps are running."
        hasActions: true
        positiveButtonText: "agree"
        negativeButtonText: "disagree"
    }

    Dialog {
        id: textFieldDialog
        title: "Change Text"
        hasActions: true

        TextField {
            id: optionText
            width: parent.width
            placeholderText: "New Option to Confirm"
        }

        onAccepted: {
            dialogSnackBar.open("You entered: %1".arg(optionText.text))
        }
    }

    Dialog {
        id: scrollingDialog
        title: "Phone ringtone"

        QuickControls.ExclusiveGroup {
            id: optionGroup
        }

        RadioButton {
            text: "None"
            checked: true
            exclusiveGroup: optionGroup
        }
        RadioButton {
            text: "Callisto"
            exclusiveGroup: optionGroup
        }
        RadioButton {
            text: "Dione"
            exclusiveGroup: optionGroup
        }
        RadioButton {
            text: "Ganymede"
            exclusiveGroup: optionGroup
        }
        RadioButton {
            text: "Hangouts Call"
            exclusiveGroup: optionGroup
        }
        RadioButton {
            text: "Luna"
            exclusiveGroup: optionGroup
        }
        RadioButton {
            text: "Oberon"
            exclusiveGroup: optionGroup
        }
        RadioButton {
            text: "Phobos"
            exclusiveGroup: optionGroup
        }
        RadioButton {
            text: "Pyxis"
            exclusiveGroup: optionGroup
        }
    }

    Column {
        anchors.centerIn: parent
        spacing: 10

        Button {
            text: "Show alert without title bar"
            anchors.horizontalCenter: parent.horizontalCenter
            elevation: 1
            onClicked: {
                alertNoTitleBar.show()
            }
        }

        Button {
            text: "Show alert with title bar"
            anchors.horizontalCenter: parent.horizontalCenter
            elevation: 1
            onClicked: {
                alertWithTitleBar.show()
            }
        }

        Button {
            text: "Show text field dialog"
            anchors.horizontalCenter: parent.horizontalCenter
            elevation: 1
            onClicked: {
                textFieldDialog.show()
            }
        }

        Button {
            text: "Show scrolling dialog"
            anchors.horizontalCenter: parent.horizontalCenter
            elevation: 1
            onClicked: {
                scrollingDialog.show()
            }
        }
    }

    Snackbar {
        id: dialogSnackBar
    }
}

}

`

[binamkayastha]

Heh. I have the same issue. I'm wondering whether this project has been abandoned, which would be sad. :(

[binamkayastha]

Well it took me around 14 hours of not stop debugging, but I think I finally figured it out. You need to use a page stack or this won't work as expected. I have no idea why the library sets it up like this, and it can't just be a simple "last element loaded get's rendered at the top", but whatever. Basically if you run the main.qml file in the demo folder, it will work as expected. If you get rid of as much as possible you end up with a file like this:

import QtQuick 2.4
import Material 0.2
import Material.ListItems 0.1 as ListItem

ApplicationWindow {
    visible: true

    initialPage: Page {
        DialogDemo {
            anchors.centerIn: parent
        }
    }
}

afaik, that's the minimum you can do to have the dialog example work as expected. I still have not figured out the internals of why a pagestack is used, but at least we know what to do to make it work :p