Shiny 1.4.0 - renderUI + JS

[harrisonhenri]

System details

Browser Version: Chrome

R version 3.6.1 (2019-07-05)
Platform: x86_64-w64-mingw32/x64 (64-bit)
Running under: Windows 10 x64 (build 18362)

Matrix products: default

locale:
[1] LC_COLLATE=Portuguese_Brazil.1252 
[2] LC_CTYPE=Portuguese_Brazil.1252   
[3] LC_MONETARY=Portuguese_Brazil.1252
[4] LC_NUMERIC=C                      
[5] LC_TIME=Portuguese_Brazil.1252    

attached base packages:
[1] stats     graphics  grDevices utils     datasets 
[6] methods   base     

other attached packages:
[1] shinydashboard_0.7.1 shiny_1.4.0         

loaded via a namespace (and not attached):
 [1] compiler_3.6.1  fastmap_1.0.1   magrittr_1.5   
 [4] R6_2.4.0        promises_1.1.0  later_1.0.0    
 [7] htmltools_0.4.0 tools_3.6.1     Rcpp_1.0.3     
[10] jsonlite_1.6    digest_0.6.22   xtable_1.8-4   
[13] httpuv_1.5.2    mime_0.7        rlang_0.4.0

Example application or steps to reproduce the problem

app:

    library(shiny)
    library(shinydashboard)
    ui <- fluidPage(

    tags$script(src="jquery.mask.js",type="text/javascript"),
    tags$script(src="jsMask.js",type="text/javascript"),

    # Assembling page
    dashboardPage(

        # Assembling header
        dashboardHeader(title = "JS in RenderUI", titleWidth = 1294), 

        # Assembling sidebar
        dashboardSidebar(

            sidebarMenu(
                menuItem("JS in RenderUI", tabName = "custom", icon = icon("search"))
            )

        ),
        # Assembling the body of the page
        dashboardBody(

            tabItems(
                tabItem(tabName = "custom",
                        br(),
                        br(),
                        uiOutput(outputId = "out")

                )

            ) 

        )

    )
)
server <- function(input, output, session) {

    {#### RenderUI -----

        # output$out <- renderUI({fluidPage(tags$script(src="jsMask.js",type="text/javascript"),textInput("phoneInput", label = "Phone Mask", width = "100%"))})

        output$out <- renderUI({fluidPage(textInput("phoneInput", label = "Phone Mask", width = "100%"))})

    }

}

shinyApp(ui, server)

www content:

jquery Mask:

https://github.com/igorescobar/jQuery-Mask-Plugin/tree/master/dist

jsMask.js:

   $(function() {
        console.log("Hello!");
        $('#phoneInput').mask('(00)0000-0000');
        console.log("Hello again!");
    });

[schloerke]

@HarrisonHenri What seems to been the issue?

[harrisonhenri]

It seems to be the interaction between JS libraries and the renderUI environment.

[wch]

@HarrisonHenri Can you describe the problem that you're seeing?

[harrisonhenri]

In Shiny 1.3.2, it is not necessary to insert the jsMask.js file into renderUI and the mask works very well:

However in Shiny 1.4.0, I have to insert the jsMask.js file into renderUI to create the mask: