Drop down lists in select_group for small screens

[filipwastberg]

When looking at the app below on a small screen with zoom in the browser the input-boxes from select_group_ui expands upwards and "hides" the results. This makes it impossible to select choices in the top of the list.

I think it would make sense to always expand the dropdown downwards. I didn't register this because I'm pretty much always on a large screen, but many organizations are using small laptopts with browsers where the default is 150% zoom.

I'm sure I can fix this by manipulating the css but thought I would register it here anyways.

library(shiny)
library(datamods)
library(shinyWidgets)

myModuleUI <- function(id){
  ns <- NS(id) 
  fluidRow(
    column(
      width = 10, offset = 1,
      tags$h3("Filter data with select group module"),
      shinyWidgets::panel(
        select_group_ui(
          id = ns("my-filters"),
          params = list(
            Manufacturer = list(inputId = "Manufacturer", label = "Manufacturer:"),
            Type = list(inputId = "Type", label = "Type:"),
            AirBags = list(inputId = "AirBags", label = "AirBags:"),
            DriveTrain = list(inputId = "DriveTrain", label = "DriveTrain:")
          )
        ),
        status = "primary"
      ),
      reactable::reactableOutput(outputId = ns("table"))
    )
  )
}
myModuleServer <- function(id){
  moduleServer(id, function(input, output, session){
    res_mod <- select_group_server(
      id = "my-filters",
      data_r  = reactive(MASS::Cars93),
      vars_r  = reactive(c("Manufacturer", "Type", "AirBags", "DriveTrain"))
    )
    output$table <- reactable::renderReactable({
      reactable::reactable(res_mod())
    })
  })
  
}

ui <- fluidPage(
  # theme = bslib::bs_theme(version = 5L),
  myModuleUI("change")
)

server <- function(input, output, session) {
  myModuleServer("change")
}
shinyApp(ui, server)

[yensmora]

Hello!! I 'm having the same problem. @filipwastberg did you find a solution?

[filipwastberg]

@yensmora Unfortunately not!

[pvictor]

Unfortunately this is an issue with th JavaScript library used by virtualSelectInput which hasn't been fixed yet. I can only provide workaround:

1. Keep the menu always open using :

select_group_ui(
  ..., 
  vs_args = list(keepAlwaysOpen = TRUE, optionsCount = 5)
)

2. Show the menu in a popup :

select_group_ui(
  ..., 
  vs_args = list(
    showDropboxAsPopup = TRUE,
    popupDropboxBreakpoint = "900px"
  )
)

i.e. if screen width < 900px then menu is shown in popup