DT Datatable with selectInputs resets back to left after selection

I am using selectInputs in a column of a DT datatable in a Shiny app. Thanks to some help here, I am including some JavaScript to selectize the selectInputs to keep the style and search capability of selectize. It is a wide table, so the selectInputs require scrolling horizontally to see them.

When I make a selection in any of the selectInputs the first time, everything works fine. However, when I click any of the selectInputs a second time, the page scrolls back to the left and the selectInputs are out of view. How can I keep the style and search capability I have but prevent this from happening?

EDIT: I also tried using shinyWidgets::pickerInput, and it does not have the scrollbar problem. However, the liveSearch feature does not work for me in a datatable. If you can solve that issue, I'll consider this question answered.

Example:

library(shiny)
library(DT)

# Function to selectize one or more input ids
selectize_ids <- function(ids) {
  myStrings <- as.character(sapply(ids, function(id) {
    paste0("  $('#", id, "').selectize();")
  }))
  c(
    "function(settings){",
    myStrings,
    "}"
  )
}

shinyApp(
  ui = fluidPage(
    div(style = "display: none;", selectInput(inputId = "dummy", label = NULL, choices = 1:2)),
    fluidRow(DT::dataTableOutput("mytable"))
  ),
  server = function(input, output, session) {
    df <- as.data.frame(matrix(data = paste0("text", 1:60), ncol = 20))
    colnames(df) <- paste0("column", 1:ncol(df))
    df$myselect <- sapply(1:nrow(df), function(i) {
      as.character(selectInput(
        inputId = paste0("myselect_", i),
        label = NULL,
        choices = c("option1", "option2", "option3")
      ))
    })
    select_ids <- paste0("myselect_", 1:nrow(df))
    output$mytable <- DT::renderDataTable({
      DT::datatable(
        data = df,
        escape = F,
        options = list(
          initComplete = JS(selectize_ids(select_ids))
        )
      )
    })
  }
)

The reason that the datatable resets left after the second click on the SelectInput is that selectize has input fields which have position: absolute and left: -10000px. Disabling this fact can be implemented by adding CSS, e.g. for the first SelectInput:

#myselect_1-selectized {
    position: relative !important; 
    left: 0px !important;
}

This CSS can be generated dynamically for all your SelectInput inside the datatable

selectize_css <- function(ids) {
    css_list <- as.character(sapply(ids, function(id) {
        paste0("#",
               id,
               "-selectized {position: relative !important; left: 0px !important;} ")
    }))
    paste(css_list, collapse = '')
}

and can then be included inside the fluidPage by using

tags$style(HTML(selectize_css(select_ids)))

Complete minimal example:

library(shiny)
library(DT)

# Function to selectize one or more input ids
selectize_ids <- function(ids) {
    myStrings <- as.character(sapply(ids, function(id) {
        paste0("  $('#", id, "').selectize();")
    }))
    c("function(settings){",
      myStrings,
      "}")
}

selectize_css <- function(ids) {
    css_list <- as.character(sapply(ids, function(id) {
        paste0("#",
               id,
               "-selectized {position: relative !important; left: 0px !important;} ")
    }))
    paste(css_list, collapse = '')
}


shinyApp(
    ui = fluidPage(
        tags$style(HTML(selectize_css(select_ids))),
        div(style = "display: none;", selectInput(
            inputId = "dummy",
            label = NULL,
            choices = 1:2
        )),
        fluidRow(DT::dataTableOutput("mytable"))
    ),
    server = function(input, output, session) {
        df <- as.data.frame(matrix(data = paste0("text", 1:60), ncol = 20))
        colnames(df) <- paste0("column", 1:ncol(df))
        df$myselect <- sapply(1:nrow(df), function(i) {
            as.character(selectInput(
                inputId = paste0("myselect_", i),
                label = NULL,
                choices = c("option1", "option2", "option3")
            ))
        })
        select_ids <- paste0("myselect_", 1:nrow(df))
        output$mytable <- DT::renderDataTable({
            DT::datatable(
                data = df,
                escape = F,
                options = list(initComplete = JS(selectize_ids(select_ids)))
            )
        })
    }
)

The problem you are experiencing is caused by the fact that the initComplete event is fired when the datatable is first rendered, and then again when the user clicks on one of the selectInputs. The initComplete event scrolls the page to the top of the datatable, which is why the selectInputs are out of view when the user clicks on them a second time.

To prevent this from happening, you can use the scrollY option to set the initial scroll position of the datatable. For example, you could use the following code:

options = list(
  initComplete = JS(selectize_ids(select_ids)),
  scrollY = 300
)

This will set the initial scroll position of the datatable to 300 pixels from the top of the page. This will ensure that the selectInputs are always visible when the user clicks on them.

Here is the complete code:

library(shiny)
library(DT)

# Function to selectize one or more input ids
selectize_ids <- function(ids) {
  myStrings <- as.character(sapply(ids, function(id) {
    paste0("  $('#", id, "').selectize();")
  }))
  c(
    "function(settings){",
    myStrings,
    "}"
  )
}

shinyApp(
  ui = fluidPage(
    div(style = "display: none;", selectInput(inputId = "dummy", label = NULL, choices = 1:2)),
    fluidRow(DT::dataTableOutput("mytable"))
  ),
  server = function(input, output, session) {
    df <- as.data.frame(matrix(data = paste0("text", 1:60), ncol = 20))
    colnames(df) <- paste0("column", 1:ncol(df))
    df$myselect <- sapply(1:nrow(df), function(i) {
      as.character(selectInput(
        inputId = paste0("myselect_", i),
        label = NULL,
        choices = c("option1", "option2", "option3")
      ))
    })
    select_ids <- paste0("myselect_", 1:nrow(df))
    output$mytable <- DT::renderDataTable({
      DT::datatable(
        data = df,
        escape = F,
        options = list(
          initComplete = JS(selectize_ids(select_ids)),
          scrollY = 300
        )
      )
    })
  }
)

This code will prevent the page from scrolling back to the top when the user clicks on one of the selectInputs.