Removing UI drop-down element dynamically in R Shiny

Question

Probably very basic question - but can't translate similar posts I've found to my exact issue.

Within an R Shiny app, I have a first drop-down menu that is populated by a vector produced on the server - this allows me to make one set of choices.

I want to have a tick box that then introduces a second drop down - but I want that drop down to disappear if I un-tick the tick box.

I've had a go - see MWE below - the graph is just there to keep to the structure of my original code (obviously I'm aware my drop-downs do nothing but that's not the case in the original but wanted the MWE to be as 'M' as possible).

If I remove the removeUI() line then ticking the tick-box does create a new drop down as required - but then un-ticking the tick box fails to remove it.

I'm obviously missing something; any help much appreciated as I totally suck at R Shiny but really want to get better!

library(shiny)
library(shinyMobile)

# define UI elements
ui <- f7Page(

  f7SingleLayout(
    navbar = f7Navbar(
    ),
    f7Card(htmlOutput("initial_drop_down"), #first drop down
           f7checkBox(inputId = "switch", label = "Introduce second choice", FALSE), #tick box for second drop down if required
           htmlOutput("reactive_drop_down") #second drop down
    ),
    f7Shadow(
      intensity = 16,
      f7Card(
        plotOutput("distPlot", height = "800px") # plot - originally linked to drop down choices but an arbitrary graph here for simplicity
      )
    )  
  )


)

# server calculations
server <- function(input, output) {
  library(ggplot2)

  # generate first drop down - done on server side since usually choices vector is comprised of information read in from files
  output$initial_drop_down = renderUI({ 
    selectInput(inputId = "initial_choice",
                label = "First choice:",
                choices = c("Choice 1", "Choice 2", "Choice 3")) 
  })

  observeEvent(input$initial_choice, {

    # trying to add second drop down based on action in switch - not convinced my use of observeEvent is quite right - issue likely sits in here.
    observeEvent(input$switch, {

      if(input$switch == T){

        output$reactive_drop_down = renderUI({ 
          selectInput(inputId = "second_choice", 
                      label = "Second (dynamic) choice:", 
                      choices = c(1,2,3)) 
        })
      }else{
        removeUI(selector ="#reactive_drop_down")
      }
    })

    output$distPlot <- renderPlot({
      ggplot(data = cars) + geom_line(aes(x=speed, y=dist))
    })
  })
}

# Run the application 
shinyApp(ui = ui, server = server)

Ben Ben · Accepted Answer · 2020-05-09T17:12:39

Could you use conditionalPanel? Put your htmlOutput for your second input there in your ui. I would avoid using nested observeEvent and output.

library(shiny)
library(shinyMobile)
library(ggplot2)

# define UI elements
ui <- f7Page(
  f7SingleLayout(
    navbar = f7Navbar(
    ),
    f7Card(htmlOutput("initial_drop_down"), #first drop down
           f7checkBox(inputId = "switch", label = "Introduce second choice", FALSE), #tick box for second drop down if required
           conditionalPanel(
             condition = "input.switch==1",
             htmlOutput("reactive_drop_down") #second drop down
           )
    ),
    f7Shadow(
      intensity = 16,
      f7Card(
        plotOutput("distPlot", height = "800px") # plot - originally linked to drop down choices but an arbitrary graph here for simplicity
      )
    )  
  )
)

# server calculations
server <- function(input, output) {

  # generate first drop down - done on server side since usually choices vector is comprised of information read in from files
  output$initial_drop_down = renderUI({ 
    selectInput(inputId = "initial_choice",
                label = "First choice:",
                choices = c("Choice 1", "Choice 2", "Choice 3")) 
  })

  output$reactive_drop_down = renderUI({ 
    selectInput(inputId = "second_choice", 
                label = "Second (dynamic) choice:", 
                choices = c(1,2,3)) 
  })

  output$distPlot <- renderPlot({
    ggplot(data = cars) + geom_line(aes(x=speed, y=dist))
  })

}

# Run the application 
shinyApp(ui = ui, server = server)

Removing UI drop-down element dynamically in R Shiny

1 Answers