Uncaught exception when opening custom dialogue box

Expected Behavior

When opening a dialogue box with myCustomDialog.showDialog() or myCustomDialog.show(), the dialogue should open normally.

Current Behavior

It crashes instead and throws an exception:

Uncatchable Throw: There was a problem validating this component as it has already been destroyed```
It produces the following stack trace:
```haxe.ui.core.ComponentValidation.syncComponentValidation (/home/matt/.config/haxelib/haxeui-core/git/haxe/ui/core/ComponentValidation.hx:231)
haxe.ui.backend.DialogBase.show (/home/matt/.config/haxelib/haxeui-core/git/haxe/ui/backend/DialogBase.hx:123)
haxe.ui.backend.DialogBase.showDialog (/home/matt/.config/haxelib/haxeui-core/git/haxe/ui/backend/DialogBase.hx:99)
editor.EditorState.saveLevel (/home/matt/MEGAsync/flixel/HelloWorld/source/editor/EditorState.hx:807)
editor.EditorState.create (/home/matt/MEGAsync/flixel/HelloWorld/source/editor/EditorState.hx:304)
...

Possible Solution

Dialogue box component is being destroyed too early maybe? Is the code for closing the box being called before validation?

Steps to Reproduce (for bugs)

Create a custom component which extends Dialog
Attempt to run .show() or .showDialog() on the instance

Test app / minimal test case

In PlayState.hx in a new HaxeFlixel 4.10.0 project:

package;

import flixel.FlxState;
import flixel.ui.FlxButton;
import haxe.ui.Toolkit;
import haxe.ui.containers.dialogs.Dialog;

class PlayState extends FlxState
{
    var button:FlxButton;

    override public function create()
    {
        super.create();
        Toolkit.init();
        button = new FlxButton();
        button.text = "Click me!";
        button.onDown.callback = () ->
        {
            var customDialog = new MyCustomDialog();
            customDialog.showDialog();
        }
        button.screenCenter();
        add(button);
    }

    override public function update(elapsed:Float)
    {
        super.update(elapsed);
    }
}

@:build(haxe.ui.macros.ComponentMacros.build("assets/ui/customDialog.xml"))
class MyCustomDialog extends Dialog
{
    public function new()
    {
        super();
        title = "Entry Form";
        buttons = DialogButton.CANCEL | "Custom Button" | DialogButton.APPLY;
    }
}

In assets/ui/customDialog.hx:

<?xml version="1.0" encoding="utf-8" ?>
<dialog width="300">
    <grid width="100%">
        <label text="First Name:" verticalAlign="center" />
        <textfield width="100%" />

        <label text="Last Name:" verticalAlign="center" />
        <textfield width="100%" />

        <label text="Sex:" verticalAlign="center" />
        <dropdown width="100%" text="Unspecified">
            <data>
                <item text="Male" />
                <item text="Female" />
                <item text="Unspecified" />
            </data>
        </dropdown>

        <label text="DoB:" verticalAlign="center" />
        <dropdown text="Unspecified" type="date" width="100%" />
    </grid>
</dialog>

Your Environment

Pop!_OS 21.10
Haxe 4.2.4
HaxeFlixel 4.10.0
Lime 7.9.0
Linux, HashLink 1.11 or HTML5 targets

Media

https://user-images.githubusercontent.com/79861976/147690269-91d118aa-4705-4628-8026-b5ad190aef9b.mp4

haxeui / haxeui-core

Uncaught exception when opening custom dialogue box #431