Displaying a complex HTML component breaks a dropdown control

[mwouts]

This issue was first reported by @vnijs at mwouts/itables#181. When a datatables table is displayed in one tab, the dropdown control in the second tab is not displayed.

Are there some rules that we have to follow in itables when generating the HTML that have to be followed to avoid this?

Below a minimal example that reproduces the issue.

Many thanks,

from shiny import App, ui, render
import pandas as pd

from itables import to_html_datatable as DT

df = pd.DataFrame({"a": [5]})
app_ui1 = ui.page_fluid(
    # no dropdown shown in "blocked" tab
    # but the issue goes away if we just display an empty ui.HTML()
    ui.navset_tab(
        ui.nav("Tab1", ui.HTML(DT(df))),
        ui.nav(
            "Blocked",
            ui.output_ui("ui_rvar"),
        ),
    )
)


def server(input, output, session):
    @output(id="ui_rvar")
    @render.ui
    def ui_rvar():
        return ui.input_select(
            id="rvar",
            label="Response Variable",
            selected=None,
            choices=["a", "b"],
        )


app = App(app_ui1, server)

[nealrichardson]

I don't know enough about what's happening here to give an answer, but I did run this locally and could reproduce the issue. Looking at the DOM and comparing with what is inserted for simpler HTML tags, I notice that the itables renders with the <div> for the table and also a bit of <script> and loading of other assets, including jQuery (fortunately it's the same version we already loaded on the page). My guess is that something there is conflicting.

[nealrichardson]

I just stumbled onto rstudio/shiny#2535 (comment), which sounds similar in Shiny for R. @jcheng5 could speak with more certainty on it.

[mwouts]

Thank you @nealrichardson for your comments above. They have been very helpful. Since you mention that Shiny loads jQuery already, I have just tried to remove the statement import 'https://code.jquery.com/jquery-3.6.0.min.js'; from itables when used in the context of a Shiny application... and that worked. To be released soon in itables==1.5.3.