Why do the observers work in one example and not the next?

Question

I have the observers working correctly in Example 1 code below, whereby clicking the "Click to show" button renders text and "Click to hide" hides the text. I am trying to extend this show/hide into more involved code in Example 2 below, whereby clicking "Delete" renders selectInput() to its right and clicking "Add" should hide that selectInput() . Clicking "Add" is not hiding selectInput() . Clicking "Delete" correctly renders the selectInput . There must be something wrong in my use of observeEvent() in Example 2 and I keep fiddling with it with no luck yet. Can someone please provide guidance on getting Example 2 to work like Example 1?

Example 1 code:

library(shiny)
library(shinyjs)

ui = fluidPage(
       useShinyjs(), # Set up shinyjs
       actionButton("btn", "Click to show"),
       actionButton("btn1","Click to hide"),
       hidden(p(id = "element", "I was invisible"))
     )

server = function(input, output) {
  observeEvent(input$btn, {show("element")})
  observeEvent(input$btn1,{hide("element")})
  }

shinyApp(ui,server)

Example 2 code:

library(rhandsontable)
library(shiny)
library(shinyjs)

mydata <- data.frame('Col 1' = c(1,24,0,1), check.names = FALSE)
rownames(mydata) <- c('Term A','Term B','Term C','Term D') 

ui <- fluidPage(
  useShinyjs(), # Set up shinyjs
  br(),
  rHandsontableOutput("mytable"),br(),
  fluidRow(
    column(1,actionButton("addCol", "Add",width = '70px')),
    column(1,actionButton("delCol","Delete",width = '70px')),
    column(3,hidden(p(id="element",uiOutput("delCol")))) # hide delCol output
    )
)

server <- function(input,output,session){
  
  output$mytable = renderRHandsontable(df())
  
  df <- eventReactive(input$addCol, {
    if(input$addCol > 0){
      newcol <- data.frame(mydata[,1])
      names(newcol) <- paste("Col",ncol(mydata)+1)
      mydata <<- cbind(mydata, newcol)
    }
    rhandsontable(mydata,rowHeaderWidth = 100, useTypes = TRUE)
  }, ignoreNULL = FALSE)
  
  observeEvent(input$delCol, priority = 0, {
    output$delCol<-renderUI(selectInput(
      "delCol",
      label=NULL,
      choices=colnames(mydata),
      selected="Col 1"))
  })
  
  observeEvent(input$addCol,priority = 1, {hide("element")}) # clicking addCol should hide delCol 
  
}

shinyApp(ui,server)

Answer 1

You use "delCol" as

1. id of an actionButton
2. an uiOutput
3. id of an selectInput()

This causes problems we can avoid when giving unique names. I also don't think it is good style to have outputs inside of observeEvent s. For this reason I separated the renderUi() from the observeEvent . The latter now only does the "hiding".

On a side note: I don't think it is a good idea to reassign mydata <<- cbind(mydata, newcol) in the global environment. It seems like you want to use a reactiveValues for that.

library(rhandsontable)
library(shiny)
library(shinyjs)

mydata <- data.frame('Col 1' = c(1,24,0,1), check.names = FALSE)
rownames(mydata) <- c('Term A','Term B','Term C','Term D') 

ui <- fluidPage(
  useShinyjs(), # Set up shinyjs
  br(),
  rHandsontableOutput("mytable"),br(),
  fluidRow(
    column(1,actionButton("addCol", "Add",width = '70px')),
    column(1,actionButton("delCol","Delete",width = '70px')),
    column(3, hidden(uiOutput("delCol2")))) # hide delCol output
  )
)

server <- function(input,output,session){
  
  output$mytable = renderRHandsontable(dat())
  
  dat <- eventReactive(input$addCol, {
    if(input$addCol > 0){
      newcol <- data.frame(mydata[,1])
      names(newcol) <- paste("Col",ncol(mydata)+1)
      mydata <<- cbind(mydata, newcol)
    }
    rhandsontable(mydata,rowHeaderWidth = 100, useTypes = TRUE)
  }, ignoreNULL = FALSE)
  
  observeEvent(input$delCol, priority = 0, show("delCol2"))
  # 
  observeEvent(input$addCol, priority = 1, hide("delCol2")) # clicking addCol should hide delCol
  
  output$delCol2 <-renderUI({
    selectInput(
      "delCol3",
      label=NULL,
      choices=colnames(mydata),
      selected="Col 1"
    )
  })
  
}

shinyApp(ui,server)