shiny icon indicating copy to clipboard operation
shiny copied to clipboard

html label doesn't work with updateCheckboxGroupInput

Open laurens-put opened this issue 3 years ago • 3 comments

html works as a label input on checkboxGroupInput, but not when a similar label is set or changed with updateCheckboxGroupInput. Similar issue with labels working for selectizeInput and sliderInput, but when updating (updateSelectizeInput and updateSliderInput) the label doesn't show correctly. (updateActionButton works)

R 4.0.2 shiny 1.5.0 htmltools 0.5.0

library(shiny) library(htmltools)

ui <- fluidPage( checkboxGroupInput(inputId = "inCheckboxGroup", label = HTML("Some text
more text on a second line"), inline = T, choices = NULL), actionButton("buildButton", "Update") )

server <- function(input, output, session) { observeEvent(input$buildButton,{ updateCheckboxGroupInput(session, inputId = "inCheckboxGroup", label = HTML("New text
more new text on a second line")) }) }

shinyApp(ui, server)

laurens-put avatar Sep 24 '20 23:09 laurens-put

I see that this is still open, but it doesn't look like it's gotten much attention. It still seems to be an issue. Particularly, checkboxGroupInput will accept HTML labels, but updateCheckboxGroupInput won't. This appears to also be an issue with radioButtons and updateRadioButtons, but not with updateActionButton. I didn't check it against other inputs, but it seems like there's more than one way of updating input labels and some of them accept HTML while others don't. This example (adapted from above) shows the controls with functional HTML labels at startup but with tags escaped on update:

library(shiny)

ui <- fluidPage(
  radioButtons("radio",HTML("Whoopise<br><em>daisy</em>"),choices = c("one" = "one", "apple" = "town")),
  checkboxGroupInput(inputId = "inCheckboxGroup",
                     label = HTML("Some text<br>more text on a <em>second</em> line"),
                     inline = T,
                     choices = NULL),
  actionButton("buildButton", "Update")
)

server <- function(input, output, session) {
  observeEvent(input$buildButton,{
    updateCheckboxGroupInput(session, inputId = "inCheckboxGroup",
                             label = HTML("New text\n\n<br>more new text on a second line"))
    updateRadioButtons(session,"radio",label=HTML("shout it <br><br><small>out</small>"))
    # curiously, the below call doesn't require the label to be wrapped with HTML() for it to display
    updateActionButton(session,"buildButton",label="once<br>twice<br>three times a fool")
  })
}

shinyApp(ui, server)

mhoban avatar Jun 03 '21 22:06 mhoban

And in case anyone else arrives at this issue through a search, you can work around the issue using shinyjs and just setting the label directly. It looks like the <label> tag for the input has an id of "input_id-label", so here's a reworking of the above example to do what you want to do (note the required useShinyjs() call in the ui section:

library(shiny)
library(shinyjs)

ui <- fluidPage(
  shinyjs::useShinyjs(),
  checkboxGroupInput(inputId = "gruppo",
                     label = HTML("Some text<br>more text on a <em>second</em> line"),
                     inline = T,
                     choices = NULL),
  actionButton("button", "Update")
)

server <- function(input, output, session) {
  observeEvent(input$button,{
    shinyjs::html(id="gruppo-label",html="<em>html</em><br>text") 
    # updateActionButton(session,"buildButton",label="once<br>twice<br>three times a fool")
  })
}

shinyApp(ui, server)

mhoban avatar Jun 03 '21 23:06 mhoban

This same issue affects updateDateRangeInput()

library(shiny)
if (interactive()) {
  
  ui <- fluidPage(
    sliderInput("n", "Day of month", 1, 30, 10),
    dateRangeInput("inDateRange", "Input date range")
  )
  
  server <- function(input, output, session) {
    observe({
      date <- as.Date(paste0("2013-04-", input$n))
      
      updateDateRangeInput(session, "inDateRange",
                           label = HTML(paste("Date range label <small>", input$n, "</small>")),
                           start = date - 1,
                           end = date + 1,
                           min = date - 5,
                           max = date + 5
      )
    })
  }
  
  shinyApp(ui, server)
}

image

eliocamp avatar Jul 07 '22 20:07 eliocamp