Problem with combination of hide(), show() and reset() in shiny

Question

I have been having problems combining the hide(), show() and reset() functions from the shinyjs package. I have two divs. One div collects data using multiple user inputs and ends with a submit button. Once the submit button is pressed, another div should appear that shows the collected data in a table. In this second div, there is another button that should reset the original giv and show it again so that more data can be collected.

I tried to produce a reproducible example using some code from the shinyjs help page:

library(shiny)
library(shinyjs)

shinyApp(
 ui = fluidPage(
   useShinyjs(),
   div(
     id = "form",
     textInput("name", "Name", "Dean"),
     radioButtons("gender", "Gender", c("Male", "Female")),
     selectInput("letter", "Favourite letter", LETTERS)
   ),
   div(
     id = "formreset",
     textInput("name", "Newform", "Dean"),
     radioButtons("gender", "Newform", c("Male", "Female")),
     selectInput("letter", "Newform letter", LETTERS)
   ),
   actionButton("reset_originalDiv", "Reset to original div"),
   actionButton("resetName", "Reset name"),
   actionButton("resetGender", "Reset Gender"),
   actionButton("change_div", "Change div")
 ),
 server = function(input, output) {
   observeEvent(input$resetName, {
     reset("name")
   })
   observeEvent(input$resetGender, {
     reset("gender")
   })
   observeEvent(input$change_div, {
     hide("form")
     show("formreset")
   })
   observeEvent(input$reset_originalDiv, {
     reset("form")
     hide("formreset")
     show("form")
   })
 }
)

As you can see, when clicking the "Reset to original div", the original div is not shown again.

Where is my mistake?

Thank you very much in advance.

user_3358272 · Answer

Up front: perhaps show(.) is not the show you think it is, use shinyjs::show.

Finding this: add a debugging step to one of the observeEvent blocks that calls show:

   observeEvent(input$change_div, {
     browser()
     hide("form")
     show("formreset")
   })

Run the app, then click on the appropriate button.

If we look at hide, it is what we think it should be:

Browse[2]> hide
function (id = NULL, anim = FALSE, animType = "slide", time = 0.5, 
    selector = NULL, asis = FALSE) 
{
    ...
}

However, perhaps show is not:

Browse[2]> show
standardGeneric for "show" defined from package "methods"

function (object) 
standardGeneric("show")


Methods may be defined for arguments: object
Use  showMethods(show)  for currently available ones.
(This generic function excludes non-simple inheritance; see ?setIs)

This is showing us methods::show, whose first argument is indeed a character, and its return value is not really important to us in general, since shinyjs::show's return value is NULL, operating solely in side-effect. Because of what it does, we will get no warning or error indicating something might be amiss.

If you change all of your references to shinyjs::show, perhaps it will work.

Note: the first time I ran this app, it behaved as I just documented with the incorrect show. Once I tested the fix, now I cannot reproduce the problem with regular show("formreset"), so it is possible that something else may be going on. Using shinyjs::show is never wrong or different (unless you really are expecting to use a different show).

user_12671149 · Answer

I'm not positive on the why of the behavior, but if you remove the hide("formreset") and move reset("form") to the last call made in the observeEvent(input$reset_originalDiv... you get the behavior you're looking for.

observeEvent(input$reset_originalDiv, {
      shinyjs::show("form")
      reset("form")
      # hide("formreset")
    })

You might want to use toggle in an observe({}) block based on the style condition of the form div class, which when hidden is "display:none" to manage the formreset button.

Problem with combination of hide(), show() and reset() in shiny

2 Answers