Issue with tooltip finding selectInput menus when selectize=TRUE

[akconley]

I have a shiny app with several selectInput pull downs. When I started making my intro steps (dynamically in the server side) everything worked fine with text outputs and plot outputs and even with the first menu- the appropriate element was highlighted and the tool text displays where it ought to be. But when I went on to create a tool tip around a second menu, the menu was not highlighted and the tool tip text appeared in the upper left corner of the window, nowhere near the designated menu.

After trying to figure out why the script worked with one selectInput drop down and not the other, I found that the only thing different about the two menus was that I had deliberately set "selectize=FALSE" on the menu that works perfectly with introjs. All of my other selectInput menus used the default selectize=TRUE , and when I changed the menu that was giving me the glitch to "selectize=FALSE", then the intro step worked perfectly, the text is in the right place.

But....now I'm stuck with the "selectize=FALSE" form of the menu, which for various reasons is less user friendly. And a little bit ugly.

Is there any way to get to tool tip to find a selectize=TRUE menu?

[carlganz]

Thanks for report. Please provide a reproducible example and I will look into this.

[akconley]

library(shiny)
library(rintrojs)

testui <- shinyUI(fluidPage(
  introjsUI(),
  mainPanel(
    textInput("intro","Enter an introduction"),
    actionButton("btn","Press me"),
    selectInput("selectInput1", "Select Menu (no selectize)",
                c("Cylinders" = "cyl",
                  "Transmission" = "am",
                  "Gears" = "gear"),selectize = FALSE),
    selectInput("selectInput2", "Select Menu (selectize",
                c("Cylinders" = "cyl",
                  "Transmission" = "am",
                  "Gears" = "gear"),selectize = TRUE)
  )
)
)

testserver <- shinyServer(function(input, output, session) {

  steps <- reactive(data.frame(element = c(NA,"#btn","#selectInput1","selectInput2"),
                               intro = c("This is a floating text input and it's supposed to be here.","This is a button","This is the menu without selectize and it is in the right place. But very ugly.","This should be showing off the beautiful selectize menu, but instead it is floating in the middle of nowhere. Adrift. So lost. So sad.")))

  observeEvent(input$btn,{
    introjs(session,options = list(steps=steps()))

  })

})

shinyApp(ui = testui, server = testserver)

[carlganz]

This makes sense, with selectize inputs the HTML element with the ID is not the element that is displayed. You can use a slightly verbose CSS selector to make it work.

Replacing "selectInput2" (which was probably supposed to have a #) with "#selectInput2 + .selectize-control" works because it selects the sibling with class selectize-control, which is what is actually displayed.

Let me know if that works for you.

[akconley]

Yes! Now it works perfectly! Thanks!