BUG - Updating Modal via modal.objects results in the display of the updated objects in place of modal

[SultanOrazbayev]

ALL software version info

(this library, plus any other relevant software, e.g. bokeh, python, notebook, OS, browser, etc should be added within the dropdown below.)

Software Version Info

panel==1.6.0

Description of expected behavior and the observed behavior

Running the code below will show the modal window as expected. However, if the lines inside __update_modal are uncommented, then clicking the button inserts the modal contents into the main page and does not show the modal correctly. This bug prevents dynamic update of the modal contents.

Complete, minimal, self-contained example code that reproduces the issue

import param
from panel import Column, Modal, extension, template, widgets

extension("modal")


class TestApp(param.Parameterized):
    text = param.String(default="Hello, World!")
    slider = param.Number(default=0.0)

    def __init__(self, **params):
        super().__init__(**params)
        self.modal = Modal("TEST", widgets.TextInput(name="Text:", value=self.text), name="Basic FloatPanel", margin=20)
        self.toggle_button = widgets.Button(name="Toggle modal", button_type="primary")
        self.toggle_button.on_click(lambda event: self.__update_modal())

    def __update_modal(self):
        # self.modal.objects = [
        #     widgets.FloatSlider(name="Slider", value=self.slider),
        # ]
        self.modal.show()

    def __panel__(self):
        return Column(
            self.modal,
            self.toggle_button,
        )


test = TestApp()
app = template.VanillaTemplate(title="Basic Modal", main=[test])
app.show()

[magnatek-mgs]

I ran into the same issue, so i made this ugly "fix":

import param
from panel import Column, Modal, extension, template, widgets

extension("modal")


class TestApp(param.Parameterized):
    text = param.String(default="Hello, World!")
    slider = param.Number(default=0.0)

    def __init__(self, **params):
        super().__init__(**params)
        self.modal_container = Column(
            Modal(
                "TEST",
                widgets.TextInput(name="Text:", value=self.text),
                name="Basic FloatPanel",
                margin=20,
            )
        )
        self.update_modal_button = widgets.Button(
            name="Update modal", button_type="primary"
        )
        self.update_modal_button.on_click(lambda event: self.__update_modal())
        self.show_modal_button = widgets.Button(
            name="Show modal", button_type="primary"
        )
        self.show_modal_button.on_click(lambda event: self.modal_container[0].show())

    def __update_modal(self):
        self.modal_container.clear()
        self.modal_container.append(
            Modal(
                widgets.FloatSlider(name="Slider", value=self.slider),
                name="Basic FloatPanel",
                margin=20,
            )
        )
        self.modal_container[0].show()

    def __panel__(self):
        return Column(
            self.modal_container,
            self.show_modal_button,
            self.update_modal_button,
        )


test = TestApp()
app = template.VanillaTemplate(title="Basic Modal", main=[test])
app.show()

Sure would be nice if we could dynamically update it, or have multiple instances of Modal, without them activating each other.

[magnatek-mgs]

A small note to add, after dynamically updating modal.objects and it shows up on the main page, you can then refresh the page and then the previously dynamically added content will now appear correctly inside the modal.

[magnatek-mgs]

I also have a less convoluted workaround in case anyone was interested:

import panel as pn

pn.extension("modal")


def update_modal(modal: pn.Modal, new_content: str) -> None:
    container: pn.Column = modal.objects[0]
    container.clear()
    container.append(new_content)


modal = pn.Modal(pn.Column("Initial value"))

modal_toggle_btn = modal.create_button("toggle", name="toggle")
modal_update_btn = pn.widgets.Button(
    name="update", on_click=lambda _: update_modal(modal, "Updated content")
)

pn.Column(modal, modal_toggle_btn, modal_update_btn).show()