RinteRface / shinydashboardPlus

extensions for shinydashboard
https://shinydashboardplus.rinterface.com
Other
449 stars 78 forks source link

insertUI with new box() function not working as expected #104

Closed gacolitti closed 3 years ago

gacolitti commented 3 years ago

Inserting UI into a box with insertUI() and shinydashboardPlus::box() version 2.0.0.9000 results in an incorrect display of inputs whereas using shinydashboardPlus::box() from version 0.7.5 works as expected--displaying inputs inline with other elements.

Here is a reproducible example:

library(shiny)
library(magrittr)
library(shinydashboard)
library(shinydashboardPlus)

# a module that only has a text input
mod_define_slide_inputs_ui = function(id){
  ns = NS(id)
  tags$div(
    id = ns("slide"),
    box(
      width = 6,
      id = ns("slide_box"),
      selectInput(
        inputId = ns("slide_type"),
        label = "Slide Type",
        choices = c(
          "Select Slide Type" = "",
          "Title" = "title",
          "Section Header" = "section_header",
          "Table" = "table"
        ),
        selected = ""
      )
    )
  )
}

mod_define_slide_inputs_server = function(id) {
  moduleServer(id,
               function(input, output, session) {
                 ns <- session$ns
                 observeEvent(input$slide_type, ignoreInit = FALSE, ignoreNULL = FALSE, {
                   req(input$slide_type)
                   removeUI(
                     selector = paste0("#", ns("slide_inserted_ui"))
                   )
                   insertUI(
                     selector = paste0("#", ns("slide_box")),
                     where = "beforeEnd",
                     ui = tags$div(
                       id = ns("slide_inserted_ui"),
                         textInput(
                           inputId = ns("title"),
                           label = "Title", 
                           value = NULL,
                           placeholder = "Enter Title"
                     )
                   )
                 )
               })
               }
  )
}

# ui is iniated with add/remove buttons
ui <- 
  dashboardPage(
    header = dashboardHeader(title = ""),
    sidebar = dashboardSidebar(disable = TRUE),
    body = dashboardBody(
      fluidRow(
        column(
          width = 12,
          actionButton("add", "+")
        )
      )
    )
  )

server = function(input, output,session) {
  # number of ui elements already created
  slide_count <- reactiveVal(0)
  slide_outputs <- reactiveValues()
  observeEvent(input$add, ignoreNULL = FALSE, {
    slide_count(slide_count() + 1)
    insertUI("#add",
             "beforeBegin",
             mod_define_slide_inputs_ui(id = paste0("slide", slide_count())))
    slide_outputs[[as.character(slide_count())]] = mod_define_slide_inputs_server(id = paste0("slide", slide_count()))
  })
}

shinyApp(ui = ui, server = server)
DivadNojnarg commented 3 years ago

The issue is coming from the CSS selector in insertUI, that should be paste0("#", ns("slide_box"), " .box-body") instead of paste0("#", ns("slide_box")).