rintrojs Cannot find selectizeInput element after choices are updated.

[davidaarmstrong]

I have an app that generates choices for selectizeInput() based on the value of another selector. Specifically, it finds the unique values of the selected variable and then makes those choices. I initialize the selector with selectizeInput() in the UI and then use observe({}) to identify changes in the inputs and then call updateSelectizeInput() to change the choices. This all works fine.

The problem I am running in to is when I use rintrojs, the selector of choices is identified the first time through the app, but when the choices update, if I try to go back to those again, the element cannot be found. Here's a few screenshots that identify the problem. First, here's the screenshot of the first step of the tutoria:

Next, I can choose two values from the compare groups selector.

Next, it sends me back to choose a different value for Group 1, I choose "y".

Finally, when the tutorial tries to go back to the comparison groups, it just pushes the tooltip to the top left corner.

But, there hasn't been any problem updating the selector, you can see it now has the values D, E and F.

Do you have any idea why I cannot return to the compare groups selector once the choices have been updated. Here's the toy example.

library(shiny)
library(rintrojs)
# Define UI for application that draws a histogram
ui <- fluidPage(
  
  # Application title
  titlePanel("IntroJS Problem"),
  
  # Sidebar with a slider input for number of bins 
  sidebarLayout(
    sidebarPanel(
      actionButton("browser", "browser"),
      introjsUI(),
      actionButton("btn","Interactive Tutorial"),
      selectizeInput("grp1", 
                     "Grouping Variable", 
                     choices = c("x", "y"), 
                     selected="x"),
      selectizeInput("compgroup", "Compare Groups (Choose 2)", choices="", multiple=TRUE, options=list(maxItems=2))
    ),
    
    
    # Show a plot of the generated distribution
    mainPanel(
    )
  )
)

# Define server logic required to draw a histogram
server <- function(input, output, session) {
  library(rintrojs)
  observeEvent(input$browser,{
    browser()
  })

  observe({
    g1 <- input$grp1
    if(g1 == "x"){
      chc <- c("A", "B", "C")
    }
    if(g1 == "y"){
      chc <- c("D", "E", "F")
    }
    updateSelectizeInput(session, "compgroup", choices = chc)
  })
  
  
  steps <- reactive({ 
    data.frame( 
      element = c("#grp1 + .selectize-control", 
                  "#compgroup + .selectize-control", 
                  "#grp1 + .selectize-control", 
                  "#compgroup + .selectize-control"),
      intro = c("Choose x for Group 1",
                "Choose two values for Comparing Groups", 
                "Choose y for Group 1", 
                "Choose two values for Comparing Groups"),
      position = "right")
  })
  observeEvent(input$btn, introjs(session, options = list(steps=steps())))
  
}
# Run the application 
shinyApp(ui = ui, server = server)