r introjs modal not working when scrolled down

We have a large shiny application that uses multiple horizontally stacked sections. On the last section (bottom of the page) I have a modal. Inside this modal I want to use rintrojs to guide the user (inside the modal).

The introjs does not seem to work when the modal is opened at the bottom of the page. The grey overlay will show, but the elements are not highlighed or the button pop-up will show.

Here is an minimal example (edited from r introjs bsModal):

library(rintrojs)
library(shiny)
library(shinydashboard)
library(shinyBS)


intro_df <- data.frame(element = c('#plot_box', '#bttn2_intro', '#box', '#plot', '#shiny-modal'),
                       intro = c('test plot_box', 'test bttn2', 'test box', 'plot', 'test modal'))

ui <- shinyUI(fluidPage(
  dashboardPage(dashboardHeader(title = "Test"),
                dashboardSidebar(sidebarMenu(menuItem("item1", tabName = "item1"))),
                dashboardBody(tabItems(tabItem("item1", 
                                              rep(br(), 10000), # remove this line and introjs will work
                                               
                                               
                                               actionButton("bttn", "start intro"))))),

  introjsUI()
))

server <- shinyServer(function(input, output, session) {
  output$plot <- renderPlot({
    plot(rnorm(50))
  })
  
  output$plot_box <- renderUI({
    box(id = 'box',
        div(id = "bttn2_intro", actionButton('bttn2', 'dummy')),
        plotOutput('plot'), width = '100%'
    )
  })
  
  observeEvent(input$bttn,{
    showModal(modalDialog(uiOutput('plot_box')))
  })
  
  observeEvent(input$bttn2, {
    introjs(session, options = list(steps = intro_df))
  })
  
})
shinyApp(ui = ui, server = server)

Any help with this issue would be appreciated.

Solution

Not really a solution, but you can force the app to scroll back to the top before the modal is displayed and it will work. The downside is that when the modal closes we need to scroll back to the bottom, to do that we need an actionButton that trigger this actions so the option of using easy close in the modal will not work in this case.

APP

library(rintrojs)
library(shiny)
library(shinydashboard)
library(shinyBS)
library(shinyjs)


intro_df <- data.frame(
  element = c("#plot_box", "#bttn2_intro", "#box", "#plot", "#shiny-modal"),
  intro   = c("test plot_box", "test bttn2", "test box", "plot", "test modal")
)

ui <- dashboardPage(
  dashboardHeader(title = "Test"),
  dashboardSidebar(sidebarMenu(menuItem("item1", tabName = "item1"))),
  dashboardBody(
    tabItems(
      tabItem(
        "item1",
        introjsUI(),
        shinyjs::useShinyjs(),
        rep(br(), 10000), # remove this line and introjs will work


        actionButton("bttn", "start intro")
      )
    )
  )
)
server <- shinyServer(function(input, output, session) {
  output$plot <- renderPlot({
    plot(rnorm(50))
  })

  output$plot_box <- renderUI({
    box(
      id = "box",
      div(id = "bttn2_intro", actionButton("bttn2", "dummy")),
      plotOutput("plot"), width = "100%"
    )
  })

  observeEvent(input$bttn, {
    shinyjs::runjs("window.scrollTo(0, 0)")
    showModal(
      modalDialog(
        uiOutput("plot_box"),
        footer = actionButton(
          "close_modal",
          "Dismiss"
        ),
        easyClose = FALSE
      )
    )
  })

  observeEvent(input$bttn2, {
    introjs(session, options = list(steps = intro_df))
  })

  observeEvent(input$close_modal, {
    shinyjs::runjs("window.scrollTo(0, document.body.scrollHeight)")
    removeModal()
  })
})
shinyApp(ui = ui, server = server)