rshinyshinyjsbslib

SelectizeInput becomes opaque when disabled

I am developing a shiny app in which I use the bslib package for theming. However, when I disable the input as shown below it becomes unreadable:

library(shiny)
library(bslib)

ui <- page_fluid(
  shinyjs::useShinyjs(),
  theme = bs_theme(preset = "shiny"),
  selectizeInput("id1", "selection unreadable", choices = 1:3, multiple = T)  
)
server <- function(input, output, session) {
  observeEvent(input$id1, ignoreInit =T, {
    shinyjs::disable('id1')
  })
  
}
shinyApp(ui, server)

enter image description here

Is there a way I can still use bs_theme(preset = "shiny") but with a more transparent look for disabled inputs like with the default theme:

ui <- fluidPage(
  shinyjs::useShinyjs(),
  selectInput("id1", "selection readable", choices = 1:3, multiple = T)
)
server <- function(input, output, session) {
  observeEvent(input$id1, ignoreInit =T, {
    shinyjs::disable('id1')
  })
}
shinyApp(ui, server)

enter image description here

Solution

  • You can overwrite the CSS style of the items under the disabled status. Or you can use the lock method and define the CSS style of the items under the locked status (by default there's no particular CSS style for such items):

    library(shiny)
library(bslib)

css <- "
.selectize-input.items.not-full.has-options.has-items.locked > .item {
  opacity: 0.7;
  background-color: #D3D3D3;
}"

ui <- page_fluid(
  tags$head(tags$style(HTML(css))),
  shinyjs::useShinyjs(),
  theme = bs_theme(preset = "shiny"),
  selectizeInput("id1", "selection readable", choices = 1:3, multiple = TRUE)  
)
server <- function(input, output, session) {
  observeEvent(input$id1, ignoreInit = TRUE, {
    shinyjs::runjs("$('#id1')[0].selectize.lock();")
  })
  
}
shinyApp(ui, server)