renderUI to create an input that's pre-disabled?

[mmuurr]

In a Shiny app, I'd like to use renderUI to create a new input element (e.g., an actionButton), but I'd like for it to be immediately disabled. I know one can use shinyjs (and equivalent jQuery code) to disable an existing element in the DOM, but I'm wondering about good patterns for guaranteeing that the new input element is never enabled (at least not at first). In the current pattern, the element is added (in enabled form), then disabled ... and I don't know if there's a way to chain these two steps such that it never appears enabled (even for a split second) to the end user.

Any ideas?

[jhk0530]

Some element (like div) can get class attribute and some (actionButton) doesn't.

It depends on element that you want to create

---

for actionButton. if you look shiny's default actionButton.
it will not allow to insert style attributes.

since only width attribute will be applied ( Line4 ).

so in this case, you have to "re-define" this actionButton with accepts style attributes.

for example, I usually re-define myButton like this.

• added disabled parameter to apply on actionButton's class. refer this link
• removed validateIcon term in Line7, this function does not work outside shiny I think.

myButton <- function(inputId, label, icon = NULL, width = NULL, disabled = FALSE, ...) {
  value <- restoreInput(id = inputId, default = NULL)
  class <- "btn btn-default action-button"
  tags$button(
    id = inputId,
    style = if (!is.null(width)) paste0("width: ", validateCssUnit(width), ";"),
    type = "button",
    class = if (disabled) paste0(class, " disabled"),
    `data-val` = value, list(icon, label),
    ...
  )
}

you can check myButton via this code.

ui <- fluidPage(
  myButton("btnA", "BTNA", disabled = TRUE),
  myButton("btnB", "BTNB", disabled = FALSE)
)

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

}

shinyApp(ui, server)

Regards.

[ismirsehregal]

Isn't disabled from library(shinyjs) an option for you?

It appends the disabled attribute while the UI is rendered:

tags[[1]] <- shiny::tagAppendAttributes(tags[[1]], class = "shinyjs-disabled")

It can also be applied in renderUI:

library(shiny)
library(shinyjs)

ui <- fluidPage(
  useShinyjs(),
  uiOutput("myDisabledUI"),
  uiOutput("myHiddenUI")
)

server <- function(input, output, session) {
  output$myDisabledUI <- renderUI({
    disabled(tagList(
      p("Disabled:"),
      actionButton("testBtn", "testBtn"),
      textInput("testInput", "testInput")
    ))
  })
  
  output$myHiddenUI <- renderUI({
    hidden(tagList(
      p("We won't be displayed:"),
      actionButton("testBtn2", "testBtn2"),
      textInput("testInput2", "testInput2")
    ))
  })
}

shinyApp(ui, server)

[hadley]

To disable a button you need to set the "disabled" attribute. The disabled attribute is a boolean html attribute which means you means it just needs to be present (e.g. <button disabled>) not have a value (e.g. <button disabled="true">). You can add a boolean attribute in shiny control by setting its value to "":

library(shiny)
actionButton("id", "label", disabled = "")
#> <button id="id" type="button" class="btn btn-default action-button" disabled>
#> </button>

^{Created on 2020-04-03 by the reprex package (v0.3.0)}