DateTime.show() and .showPopup() don't seem to work

[Stephen-Hamilton-C]

I have the following code in a KVision app to test DateTime:

val picker = DateTime()
button(text = "Show picker").onClick {
    picker.show()
}
add(picker)

However, clicking the button does nothing, even if I replace .show() with .showPopup()

[rjaros]

You should use .showPopup(), because .show() is for showing the component itself.

The problem you experience is caused by the fact, that DateTime component registers click event handler on the document to hide the popup. So in this case the popup is shown and hidden immediately after, because the click event is propagated to the document handler. You can't see this unless you use the debugger.

The simplest way to fix the issue is to call .stopPropagation() on the event object:

button(text = "Show picker").onClick {
    it.stopPropagation()
    picker.showPopup()
}

You can also use setTimeout to open the popup after click event is already handled:

button(text = "Show picker").onClick {
    window.setTimeout({
        picker.showPopup()
    }, 0)
}

[Stephen-Hamilton-C]

Oh thank goodness, I thought I was going insane - I tried to directly invoke the element's click function and was having no luck despite being able to do it from the JS console. Thanks!