Advanced selectInput in Quarto using shiny?

[jltovar]

Description

Hi,

Thank you in advance for your help. I am trying to move from flexdashboard to Quarto but I am having a lot of problems finding a select input function that has the functionality and options I need.

I use pickerInput in flexdashboard, and it is perfect for my needs. Unfortunately, it does not appear to work in Quarto. It renders, and the selected are selected, but when I press the dropdown menu, it responds with a color change, but no viewport appears with the selection options.

I tried virtualSelectInput, and while it mostly works and has the functionality that I can live with, the viewport only renders with two lines of selection options visible. I can scroll and see all the options, but two lines in the viewport is not ideal.

selectizeInput works, but it is not a dropdown, and the viewport will get too large since some of my selections will have hundreds of options.

Is there anything else that will work in Quarto dashboard with shiny that works like pickerInput. Is there something that I am doing wrong? Any help would be much appreciated.

---
title: "pickerInput_test"
author: "Tester"
format: dashboard
server: shiny
---

```{r setup, include=FALSE}
library(shiny)
library(shinyWidgets)

# Example data
data <- data.frame(
  year = c(2000, 2002, 2004, 2006, 2008, 2010, 2012, 2014, 2016, 2018, 2020, 2022)
)
```

## {.sidebar}
```{r}
# pickerInput(
#   inputId = "year_select",
#   label = "Select Year:",
#   choices = sort(unique(data$year)),
#   selected = sort(unique(data$year)),
#   options = pickerOptions(container = "body", actionsBox = TRUE, size = 15, selectedTextFormat = "count > 3"),
#   multiple = TRUE
# )

# virtualSelectInput(
#   inputId = "year_select",
#   label = "Select Year:",
#   choices = sort(unique(data$year)),
#   selected = sort(unique(data$year)),
#   multiple = TRUE
# )

selectizeInput(
  inputId = "year_select",
  label = "Select Year:",
  choices = sort(unique(data$year)),
  selected = sort(unique(data$year)),
  multiple = TRUE,
  options = list(
    plugins = list('remove_button')
  )
)

# selectInput(
#   inputId = "year_select",
#   label = "Select Year:",
#   choices = sort(unique(data$year)),
#   selected = sort(unique(data$year)),
#   multiple = TRUE
#  )

```

## Column
```{r}
#| context: server
# Define the server-side output
output$selected_years <- renderText({
  selected_years <- input$year_select
  if (is.null(selected_years)) {
    "No year selected."
  } else {
    paste("Selected Year(s):", paste(selected_years, collapse = ", "))
  }
})
```

```{r}
textOutput("selected_years")
```

[mcanouil]

You should go to Shiny documentation/repository.
This repository is about Quarto not shiny.

[jltovar]

I will start with pickerInput. On click the dropdown viewport does not render.

---
title: "pickerInput_test"
author: "Tester"
format: dashboard
server: shiny
---

```{r setup, include=FALSE}
library(shiny)
library(shinyWidgets)

data <- data.frame(
  year = c(2000, 2002, 2004, 2006, 2008, 2010, 2012, 2014, 2016, 2018, 2020, 2022)
)
```

## {.sidebar}
```{r}
 pickerInput(
   inputId = "year_select",
   label = "Select Year:",
   choices = sort(unique(data$year)),
   selected = sort(unique(data$year)),
   options = pickerOptions(container = "body", actionsBox = TRUE, size = 15, selectedTextFormat = "count > 3"),
    multiple = TRUE
)
```

## Column
```{r}
#| context: server
output$selected_years <- renderText({
  selected_years <- input$year_select
  if (is.null(selected_years)) {
    "No year selected."
  } else {
    paste("Selected Year(s):", paste(selected_years, collapse = ", "))
  }
})
```

```{r}
textOutput("selected_years")
```

Results for format: dashboard
https://github.com/user-attachments/assets/bcf2e0a5-738a-405e-9fbb-1f3d70c6abe5

Results for format: html
https://github.com/user-attachments/assets/f5cc0583-155d-4a6a-9cda-75a917b66aa4

[jltovar]

Here is virtualSelectInput. The dropdown viewport renders, but only two lines.

---
title: "pickerInput_test"
author: "Tester"
format: dashboard
server: shiny
---

```{r setup, include=FALSE}
library(shiny)
library(shinyWidgets)

data <- data.frame(
  year = c(2000, 2002, 2004, 2006, 2008, 2010, 2012, 2014, 2016, 2018, 2020, 2022)
)
```

## {.sidebar}
```{r}
 virtualSelectInput(
   inputId = "year_select",
   label = "Select Year:",
   choices = sort(unique(data$year)),
   selected = sort(unique(data$year)),
   multiple = TRUE
 )
```

## Column
```{r}
#| context: server
# Define the server-side output
output$selected_years <- renderText({
  selected_years <- input$year_select
  if (is.null(selected_years)) {
    "No year selected."
  } else {
    paste("Selected Year(s):", paste(selected_years, collapse = ", "))
  }
})
```

```{r}
textOutput("selected_years")
```

Results for format: dashboard
https://github.com/user-attachments/assets/80a7625a-cbae-4d8d-ae67-1dbb757e1363

Results for format: html
https://github.com/user-attachments/assets/26bb45ef-2df7-45e8-8028-391be7177e85

[gadenbuie]

Am I mistaken in believing that Quarto Dashboards advertises its compatibility with Shiny and Shiny components?

@jltovar Quarto HTML documents and dashboards work with Shiny, but not every component written for Shiny is compatible with Quarto. Some Shiny components make strong assumptions about certain things that are true in standard Shiny apps but may not be true in Quarto-Shiny documents.

If you've found one of these cases, the best course of action would be to open an issue directly with the maintainers of the components. We're always happy to provide advice about Quarto and Shiny, but we don't have much, if any, experience with these components. Feel free to include links to those issues here and we'll keep an eye on them.

[jltovar]

Thank you very much for your reply. I completely understand. Since I am new to Quarto—and didn't want to open an issue (here or elsewhere) if it was simply due to my novelty with it—I wanted to ask the community if there was something that I was doing wrong first. Now, that being said, this will, of course, end in a circular battle. I will go to shinyWidgets and get the same response I got here: "This is not a shinyWidgets issue, it is working perfectly where intended, go talk to Quarto."

Unfortunately, I can't live without a more advanced select input, so I can't use Quarto at this time—which is a shame because Quarto Dashboard has taken the ease of use and customizability of flexdashboard to another level.

[gadenbuie]

Now, that being said, this will, of course, end in a circular battle. I will go to shinyWidgets and get the same response I got here: "This is not a shinyWidgets issue, it is working perfectly where intended, go talk to Quarto."

I understand the apprehension, but I doubt that would be the case. I'm sure the shinyWidgets maintainers would want their extension to work in Quarto, too. There may be technical reasons preventing it from working in Quarto or they may not have the bandwidth at the moment to make required changes, but I think it's worth opening the conversation.

If you do open an issue, feel free to mention me in it and I'll see if I can help.