Scroll in selectinput changes the page

[etiennebacher]

Hi, sometimes I have a selectInput with lots of choices, and the users need to scroll down these choices. The problem is that scrolling in the list of choices changes the page displayed. For example, in the app below, scrolling up or down in selectInput on page 2 makes the app go up or down (whether using the mouse or the touchpad):

library(shiny)
library(fullPage)

ui <- pagePiling(
  center = TRUE,
  sections.color = c('#f2f2f2', '#2C3E50', '#39C'),
  opts = options,
  menu = c("Section 1" = "section1",
           "Piling" = "section2",
           "Plots" = "section3"),
  pageSection(
    menu = "section1",
    h1("hello")
  ),
  pageSection(
    menu = "section2",
    selectInput("test", "test", choices = names(mtcars), selected = NULL)
  ),
  pageSectionPlot(
    "plot",
    menu = "section3",
    h1("Plot background")
  )
)

server <- function(input, output){}

shinyApp(ui, server)

Note that this is also the case with fullPage:

library(shiny)
library(fullPage)

ui <- fullPage(
  menu = c("Section 1" = "section1",
           "Piling" = "section2",
           "Plots" = "section3"),
  fullSection(
    menu = "section1",
    h1("hello")
  ),
  fullSection(
    menu = "section2",
    selectInput("test", "test", choices = names(mtcars), selected = NULL)
  ),
  fullSectionPlot(
    "plot",
    menu = "section3",
    h1("Plot background")
  )
)

server <- function(input, output){}

shinyApp(ui, server)

Is it possible to stop the "page-scrolling behavior" when a selectInput (or else) is selected?

Great package by the way!

[JohnCoene]

Yes, you can prevent the scrolling behaviour with the normalScrollElements option. A gist below.

https://gist.github.com/JohnCoene/e3851a83e1ecbf073eb70cff54c9d5b2

Let me know if that works

[etiennebacher]

Thanks but two problems:

• first, it works with outputs but not with inputs. When I take my first example, add the options specified in the gist, and replace "#plot, #hist" by "#test" (id of selectInput), it does not work.
• second, this solution means that we have to specify all the ids in options, which can be tedious if there are many. Also, I think this behavior should be removed for all inputs that need scrolling, such as selectInput. I hardly see a situation in which this behavior would be desired.

[JohnCoene]

I'm limited by what the API of fullPage.js provides so I can't do that automatigically for all inputs.

The reason it does not work with #test for a selectInput is that this id is used very differently, see below.

r$> shiny::selectInput("s", "asd", choices = 1:2)                               
<div class="form-group shiny-input-container">
  <label class="control-label" for="s">asd</label>
  <div>
    <select id="s"><option value="1" selected>1</option>
<option value="2">2</option></select>
    <script type="application/json" data-for="s" data-nonempty="">{}</script>
  </div>
</div>

Try adding .shiny-input-container to block scroll on many shiny inputs.

[etiennebacher]

Using normalScrollElements = ".shiny-input-container" works indeed. Thanks a lot!