I would like to use the pickerInput function in my Quarto dashboard. Somehow this doesn't work. Here is a simple reproducible example:
---
title: "dashboard"
format: dashboard
server: shiny
---
```{r}
library(shiny)
library(shinyWidgets)
```
# Test
```{r}
pickerInput(
inputId = "somevalue",
label = "A label",
choices = c("a", "b")
)
```
```{r}
#| context: server
```
Output:
As you can see the pickerInput looks differently when running normally in a shinyapp. So I was wondering if anyone knows how we can use the pickerInput in a Quarto dashboard?
I would like to use the pickerInput function in my Quarto dashboard. Somehow this doesn't work. Here is a simple reproducible example:
---
title: "dashboard"
format: dashboard
server: shiny
---
```{r}
library(shiny)
library(shinyWidgets)
```
# Test
```{r}
pickerInput(
inputId = "somevalue",
label = "A label",
choices = c("a", "b")
)
```
```{r}
#| context: server
```
Output:
As you can see the pickerInput looks differently when running normally in a shinyapp. So I was wondering if anyone knows how we can use the pickerInput in a Quarto dashboard?
Generally, you should add context:setup to the chunk where you load the libraries because otherwise shinyWidgets may not get correctly loaded everywhere (here are e.g. some js and css dependencies missing).
However, this is not sufficient. It results in a non-working pickerInput. This maybe is due to compatibility issues with respect to Bootstrap (see also e.g. Strange behavior of pickerInput, how to resolve it?). I think that the issue here is that Quarto uses Bootstrap 5 and shinyWidgets does not correctly infer this (general Shiny uses Bootstrap 3, and Bootstrap > 3 could be e.g. used in connection with bslib). However, what we can do here is to manually import the bootstrap-select dependencies using a built-in shinyWidgets helper function:
shinyWidgets:::html_dependency_picker_bs(theme = bslib::bs_theme(version = 5))
Then everything gets corretly loaded and the pickerInput will look very similar to one which you would see in a regular Shiny app using bslib and Bootstrap 5:
---
title: "dashboard"
format: dashboard
server: shiny
---
```{r}
#| context: setup
#| include: false
library(shiny)
library(shinyWidgets)
shinyWidgets:::html_dependency_picker_bs(theme = bslib::bs_theme(version = 5))
```
# Test
```{r}
pickerInput(
inputId = "somevalue",
label = "A label",
choices = c("a", "b")
)
```
```{r}
#| context: server
```