Dialog always hiding

General Q&A
1

I have a component dialog that displays a timer (which is a html component). I have 2 buttons in this dialog, Cancel and Complete. Both of these buttons when clicked prompt a dialog asking if they are sure they want to cancel or if they have Completed the process. For each button, if the answer is No, it should just return to the component dialog displaying the timer, instead, the original dialog will stay active for a split second and then it appears the dialog crashes and disappears. Is this normal behavior ?

2

Hi forumfred,

Have you tried setting the auto-hide attribute to false?

XML:

<dialog id="some-dialog" title="Dialog" auto-hide="false">
        <body>
            <!-- Dialog Body -->
        </body>
        <button-group>
            <button label="Cancel" on-press="$:cancelLogic()" validate="false" style="outline" />
            <button label="Completed" on-press="$:completedLogic()" validate="false" />
        </button-group>
    </dialog>

If you have auto-hide set to false, you will have to explicitly tell the dialog to hide as shown in the code snippet below:

JS:

function cancelLogic() {
    // Logic for when Cancel button is pressed
    component.dialog({id: "some-dialog"}).hide();
}

function completedLogic() {
    // Logic for when Completed button is pressed
    component.dialog({id: "some-dialog"}).hide();
}

You can also follow this link for more information: dialog - JourneyApps Docs