ui.modal_remove() requires ui.modal_show()

[gadenbuie]

Originally posted by @schloerke in #1810

Similarly, I can only hide the modal if it is programmatically shown.

What I'd like to have work: Shinylive App

from shiny.express import input, render, ui
from shiny import reactive


modal = ui.modal(ui.input_slider("n", "N", 0, 100, 20), footer = ui.input_action_button("close_btn", "Close modal"), easy_close=False)

modal

@reactive.effect
@reactive.event(input.close_btn)
def _():
    print("Start remove modal")
    ui.modal_remove()
    print("End   remove modal")

---

What does work: Shinylive App

from shiny.express import input, render, ui
from shiny import reactive


modal = ui.modal(ui.input_slider("n", "N", 0, 100, 20), footer = ui.input_action_button("close_btn", "Close modal"), easy_close=False)

@reactive.effect
def _():
    ui.modal_show(modal)

@reactive.effect
@reactive.event(input.close_btn)
def _():
    print("Start remove modal")
    ui.modal_remove()
    print("End   remove modal")

---

If the modal is already open, why am I required to programmatically open it to close it.

[gadenbuie]

If the modal is already open, why am I required to programmatically open it to close it.

The short answer is that ui.modal_show() puts the modal UI inside a set of wrapper containers where ui.modal_remove() expects to find and remove it. If you just add the modal UI to the app UI, the modal isn't where ui.modal_remove() expects to find it.

You can get close by replicating the expected markup but even if you do that, you'll be missing out on event listeners that are set up by ui.modal_show().

I think Shiny Express makes the approach you tried (of just showing modal directly in the UI) more appealing, but in Shiny Core and in Shiny for R using an observe(showModal(init_modal)) is a common pattern and it seems less tempting to just add the modal UI directly into the app.

[gadenbuie]

On the other hand, you make a great point and if we turned the modal into a custom element the pattern you described would be quite natural.

That said, another reason to use ui.modal_show() over render.ui() or similar is that ui.modal_show() and ui.modal_remove() can show and hide the modal within a reactive cycle, whereas using render.ui() would have to change state once per reactive cycle.