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
```