search

rstudio / bslib

Tools for theming Shiny and R Markdown via Bootstrap 3, 4, or 5.
https://rstudio.github.io/bslib/
Other
479 stars 57 forks source link

Modal launches in the main page in version 0.5.1 but not in version 0.6.1 #924

Closed udurraniAtPresage closed 10 months ago

udurraniAtPresage commented 10 months ago

Version 0.6.1 has a really cool look of shiny preset theme! But I have a functional issue as follows.

Problem Description

My sidebar has a button that launches a modal:

page_navbar(
  sidebar = sidebar(
    width = 280,

   ## Accordians
    accordion(
     accordion_panel(
        "Intake Questionnaire",
        module_ui("intake")
      )
    )
  )
)

The module in the accordion has a button that launches a modal upon clicking. In bslib version 0.5.1, it launches in the middle of the app as desired:

bslibzp5

But in version 0.6.1 it launches inside the sidebar:

bslibzp6

I am not sure if this is a bug, but I always have modals launch in the middle of the app in the prior versions. Is there a workaround to make the modal launch in the middle of the app in version 0.6.1?

Session Info

> devtools::session_info()
─ Session info ───────────────────────────────────────────────────────────────────────────────────────────
 setting  value
 version  R version 4.3.1 (2023-06-16 ucrt)
 os       Windows 10 x64 (build 19045)
 system   x86_64, mingw32
 ui       RStudio
 language (EN)
 collate  English_Canada.utf8
 ctype    English_Canada.utf8
 tz       America/Toronto
 date     2023-11-29
 rstudio  2023.06.1+524 Mountain Hydrangea (desktop)
 pandoc   3.1.1 @ C:/Program Files/RStudio/resources/app/bin/quarto/bin/tools/ (via rmarkdown)

─ Packages ───────────────────────────────────────────────────────────────────────────────────────────────
 package         * version    date (UTC) lib source
 askpass           1.2.0      2023-09-03 [1] CRAN (R 4.3.1)
 base64enc         0.1-3      2015-07-28 [1] CRAN (R 4.3.0)
 bit               4.0.5      2022-11-15 [1] CRAN (R 4.3.1)
 bit64             4.0.5      2020-08-30 [1] CRAN (R 4.3.1)
 bsicons         * 0.1.1      2023-08-11 [1] CRAN (R 4.3.1)
 bslib           * 0.5.1      2023-08-11 [1] CRAN (R 4.3.1)
 cachem            1.0.8      2023-05-01 [1] CRAN (R 4.3.1)
 callr           * 3.7.3      2022-11-02 [1] CRAN (R 4.3.1)
 cli               3.6.1      2023-03-23 [1] CRAN (R 4.3.1)
 colorspace        2.1-0      2023-01-23 [1] CRAN (R 4.3.1)
 crayon            1.5.2      2022-09-29 [1] CRAN (R 4.3.1)
 crosstalk         1.2.0      2021-11-04 [1] CRAN (R 4.3.1)
 curl              5.0.2      2023-08-14 [1] CRAN (R 4.3.1)
 data.table        1.14.8     2023-02-17 [1] CRAN (R 4.3.1)
 devtools          2.4.5      2022-10-11 [1] CRAN (R 4.3.1)
 digest            0.6.33     2023-07-07 [1] CRAN (R 4.3.1)
 distributional    0.3.2      2023-03-22 [1] CRAN (R 4.3.1)
 dplyr           * 1.1.3      2023-09-03 [1] CRAN (R 4.3.1)
 DT              * 0.29       2023-08-29 [1] CRAN (R 4.3.1)
 echarts4r       * 0.4.5      2023-06-16 [1] CRAN (R 4.3.1)
 ellipsis          0.3.2      2021-04-29 [1] CRAN (R 4.3.1)
 evaluate          0.23       2023-11-01 [1] CRAN (R 4.3.2)
 fansi             1.0.5      2023-10-08 [1] CRAN (R 4.3.1)
 farver            2.1.1      2022-07-06 [1] CRAN (R 4.3.1)
 fastmap           1.1.1      2023-02-24 [1] CRAN (R 4.3.1)
 firebase        * 1.0.2      2023-07-07 [1] CRAN (R 4.3.2)
 fontawesome       0.5.2      2023-08-19 [1] CRAN (R 4.3.1)
 fs                1.6.3      2023-07-20 [1] CRAN (R 4.3.1)
 generator       * 0.1.0      2015-08-26 [1] CRAN (R 4.3.1)
 generics          0.1.3      2022-07-05 [1] CRAN (R 4.3.1)
 ggdist          * 3.3.0      2023-05-13 [1] CRAN (R 4.3.1)
 ggh4x           * 0.2.6      2023-08-30 [1] CRAN (R 4.3.1)
 ggiraph           0.8.7      2023-03-17 [1] CRAN (R 4.3.1)
 ggplot2         * 3.4.4      2023-10-12 [1] CRAN (R 4.3.1)
 ggradar         * 0.2        2023-09-07 [1] Github (ricardo-bion/ggradar@53404a5)
 ggrepel         * 0.9.4      2023-10-13 [1] CRAN (R 4.3.1)
 ggtext          * 0.1.2      2022-09-16 [1] CRAN (R 4.3.1)
 glue            * 1.6.2      2022-02-24 [1] CRAN (R 4.3.1)
 gridtext          0.1.5      2022-09-16 [1] CRAN (R 4.3.1)
 gtable            0.3.4      2023-08-21 [1] CRAN (R 4.3.1)
 here            * 1.0.1      2020-12-13 [1] CRAN (R 4.3.1)
 histoslider     * 0.1        2022-11-21 [1] CRAN (R 4.3.1)
 hms               1.1.3      2023-03-21 [1] CRAN (R 4.3.1)
 htmltools         0.5.7      2023-11-03 [1] CRAN (R 4.3.2)
 htmlwidgets       1.6.2      2023-03-17 [1] CRAN (R 4.3.1)
 httpuv            1.6.12     2023-10-23 [1] CRAN (R 4.3.1)
 httr            * 1.4.7      2023-08-15 [1] CRAN (R 4.3.1)
 jose              1.2.0      2021-11-06 [1] CRAN (R 4.3.1)
 jquerylib         0.1.4      2021-04-26 [1] CRAN (R 4.3.1)
 jsonlite        * 1.8.7      2023-06-29 [1] CRAN (R 4.3.1)
 knitr           * 1.45       2023-10-30 [1] CRAN (R 4.3.1)
 later             1.3.1      2023-05-02 [1] CRAN (R 4.3.1)
 lazyeval          0.2.2      2019-03-15 [1] CRAN (R 4.3.1)
 lifecycle         1.0.4      2023-11-07 [1] CRAN (R 4.3.2)
 lubridate       * 1.9.2      2023-02-10 [1] CRAN (R 4.3.1)
 magrittr          2.0.3      2022-03-30 [1] CRAN (R 4.3.1)
 memoise           2.0.1      2021-11-26 [1] CRAN (R 4.3.1)
 micromodal      * 1.0.0      2023-08-17 [1] CRAN (R 4.3.1)
 mime              0.12       2021-09-28 [1] CRAN (R 4.3.0)
 miniUI            0.1.1.1    2018-05-18 [1] CRAN (R 4.3.1)
 munsell           0.5.0      2018-06-12 [1] CRAN (R 4.3.1)
 nycflights13    * 1.0.2      2021-04-12 [1] CRAN (R 4.3.1)
 openssl           2.1.1      2023-09-25 [1] CRAN (R 4.3.2)
 pillar            1.9.0      2023-03-22 [1] CRAN (R 4.3.1)
 pkgbuild          1.4.2      2023-06-26 [1] CRAN (R 4.3.1)
 pkgconfig         2.0.3      2019-09-22 [1] CRAN (R 4.3.1)
 pkgload           1.3.2.1    2023-07-08 [1] CRAN (R 4.3.1)
 plotly          * 4.10.2     2023-06-03 [1] CRAN (R 4.3.1)
 prettyunits       1.1.1      2020-01-24 [1] CRAN (R 4.3.1)
 processx          3.8.2      2023-06-30 [1] CRAN (R 4.3.1)
 profvis           0.3.8      2023-05-02 [1] CRAN (R 4.3.1)
 promises          1.2.1      2023-08-10 [1] CRAN (R 4.3.1)
 ps                1.7.5      2023-04-18 [1] CRAN (R 4.3.1)
 purrr           * 1.0.2      2023-08-10 [1] CRAN (R 4.3.1)
 R6                2.5.1      2021-08-19 [1] CRAN (R 4.3.1)
 Rcpp              1.0.11     2023-07-06 [1] CRAN (R 4.3.1)
 reactable       * 0.4.4      2023-03-12 [1] CRAN (R 4.3.1)
 reactR            0.5.0      2023-10-11 [1] CRAN (R 4.3.1)
 readr             2.1.4      2023-02-10 [1] CRAN (R 4.3.1)
 remotes           2.4.2.1    2023-07-18 [1] CRAN (R 4.3.1)
 rlang             1.1.1      2023-04-28 [1] CRAN (R 4.3.1)
 rmarkdown         2.25       2023-09-18 [1] CRAN (R 4.3.1)
 rprojroot         2.0.3      2022-04-02 [1] CRAN (R 4.3.1)
 rstudioapi        0.15.0     2023-07-07 [1] CRAN (R 4.3.1)
 sass              0.4.7      2023-07-15 [1] CRAN (R 4.3.1)
 scales            1.2.1      2022-08-20 [1] CRAN (R 4.3.1)
 sessioninfo       1.2.2      2021-12-06 [1] CRAN (R 4.3.1)
 sever           * 0.0.7      2021-07-14 [1] CRAN (R 4.3.1)
 shiny           * 1.8.0      2023-11-17 [1] CRAN (R 4.3.2)
 shinyalert      * 3.0.0      2021-12-20 [1] CRAN (R 4.3.1)
 shinycssloaders * 1.0.0      2020-07-28 [1] CRAN (R 4.3.1)
 shinyglide      * 0.1.4      2023-02-15 [1] CRAN (R 4.3.1)
 shinyjs         * 2.1.0      2021-12-23 [1] CRAN (R 4.3.1)
 shinyWidgets    * 0.7.6      2023-01-08 [1] CRAN (R 4.3.1)
 showtext        * 0.9-6      2023-05-03 [1] CRAN (R 4.3.1)
 showtextdb      * 3.0        2020-06-04 [1] CRAN (R 4.3.1)
 shufflecards    * 0.0.4      2023-11-20 [1] Github (dreamRs/shufflecards@7874f3d)
 stringi           1.8.1      2023-11-13 [1] CRAN (R 4.3.2)
 stringr         * 1.5.1      2023-11-14 [1] CRAN (R 4.3.2)
 sysfonts        * 0.8.8      2022-03-13 [1] CRAN (R 4.3.1)
 systemfonts       1.0.5      2023-10-09 [1] CRAN (R 4.3.1)
 tibble          * 3.2.1      2023-03-20 [1] CRAN (R 4.3.1)
 tidyr           * 1.3.0      2023-01-24 [1] CRAN (R 4.3.1)
 tidyselect        1.2.0      2022-10-10 [1] CRAN (R 4.3.1)
 timechange        0.2.0      2023-01-11 [1] CRAN (R 4.3.1)
 tzdb              0.4.0      2023-05-12 [1] CRAN (R 4.3.1)
 urlchecker        1.0.1      2021-11-30 [1] CRAN (R 4.3.1)
 usethis           2.2.2      2023-07-06 [1] CRAN (R 4.3.1)
 utf8              1.2.4      2023-10-22 [1] CRAN (R 4.3.1)
 uuid              1.1-1      2023-08-17 [1] CRAN (R 4.3.1)
 vctrs             0.6.4      2023-10-12 [1] CRAN (R 4.3.1)
 viridisLite       0.4.2      2023-05-02 [1] CRAN (R 4.3.1)
 vroom             1.6.3      2023-04-28 [1] CRAN (R 4.3.1)
 waiter          * 0.2.5.9000 2023-11-27 [1] Github (JohnCoene/waiter@6e087aa)
 withr             2.5.2      2023-10-30 [1] CRAN (R 4.3.1)
 xfun              0.41       2023-11-01 [1] CRAN (R 4.3.2)
 xml2              1.3.5      2023-07-06 [1] CRAN (R 4.3.1)
 xtable            1.8-4      2019-04-21 [1] CRAN (R 4.3.1)
 yaml              2.3.7      2023-01-23 [1] CRAN (R 4.3.0)

 [1] C:/Users/presage/AppData/Local/R/win-library/4.3
 [2] C:/Program Files/R/R-4.3.1/library
cpsievert commented 10 months ago

That's surprising and unintentional, sorry about that! Would you be willing to share more about how the modal is being created and shown? This minimal example seems to be working as expected:

library(shiny)
library(bslib)

ui <- page_sidebar(
  sidebar = sidebar(
    width = 280,
    accordion(
      accordion_panel(
        "Click below",
        actionButton("show", "Show modal")
      )
    )
  )
)

server <- function(input, output) {
  observeEvent(input$show, {
    showModal(modalDialog("Hello"))
  })
}

shinyApp(ui, server)
udurraniAtPresage commented 10 months ago

Your code works fine with both versions i.e., modal launches in the middle of the app. I found that the issue is with using the micromodal package. Here's a reprex:

library(shiny)
library(micromodal)
library(bslib)

# Inputs ------------------------------------------------------------------

text_input <- function(id, label, width = "1200px", ...) {
  textInput(
    inputId = id,
    label = HTML("<h4>", label, "<span style='color:red'>*</span>", "</h4>"),
    width = width,
    ...
  )
}

select_input_menu <- function(id, label, width = "1200px", ...) {
  selectizeInput(id,
    HTML("<h4>", label, "<span style='color:red'>*</span>", "</h4>"),
    width = width,
    options = list(
      placeholder = "Please select an option",
      onInitialize = I('function() { this.setValue(""); }')
    ),
    ...
  )
}

slider_input_var <- function(id, label, sep = "", width = "1200px", ...) {
  sliderInput(id,
    label = HTML("<h4>", label, "<span style='color:red'>*</span>", "</h4>"),
    sep = sep,
    width = width,
    ...
  )
}

radio_inv <- function(id, label, width = "1000px", ...) {
  shinyWidgets::radioGroupButtons(
    inputId = id,
    label = HTML("<h4>", label, "<span style='color:red'>*</span>", "</h4>"),
    choices = c(
      "Strongly disagree",
      "Slightly disagree",
      "Agree",
      "Slightly agree",
      "Strongly agree"
    ),
    selected = character(0),
    # justified = TRUE,
    checkIcon = list(
      yes = icon("ok",
        lib = "glyphicon"
      )
    ),
    width = width,
    ...
  )
}

# Module UI ---------------------------------------------------------------

module_ui <- function(id, instructor_data) {
  ns <- NS(id)

  demographics <- div(
    text_input(ns("namee"), label = "Full Name"),
    select_input_menu(ns("gender"),
      label = "Which gender do you best identify with?",
      choices = list("M", "F", "Non-binary", "Prefer not to answer")
    ),
    slider_input_var(ns("year"),
      label = "In what year were you born?",
      min = 1900,
      max = 2023,
      value = 1920,
      step = 1
    )
  )

  set1 <- div(
    radio_inv(ns("inv1"), "I like sushi."),
    radio_inv(ns("inv2"), "I like pizza.")
  )

  tagList(
    actionButton(ns("start_intake"),
      label = "Start",
      `data-micromodal-trigger` = ns("modal-demos")
    ),
    micromodal::micromodal(
      id = ns("modal-demos"),
      title = "Demographics",
      content = tagList(
        demographics
      ),
      footer = tagList(
        actionButton(ns("demos_submit"),
          label = "Next",
          `data-micromodal-trigger` = ns("modal-set1"),
          `data-micromodal-close` = NA
        )
      )
    ),

    micromodal::micromodal(
      id = ns("modal-set1"),
      title = "Set 1",
      content = set1,
      footer = tagList(
        actionButton(ns("set1_submit"),
          label = "Submit",
          `data-micromodal-close` = NA
        )
      )
    )
  )
}

# Module Server ------------------------------------------------------------------

module_server <- function(id) {
  moduleServer(
    id,
    function(input, output, session) {

    }
  )
}

# Main UI -----------------------------------------------------------------

ui <- page_navbar(

  # Header
  header = div(
    use_micromodal(),
  ),

  # Title
  title = "Title",

  # Sidebar ----------------------------------------------
  sidebar = sidebar(
    width = 280,

    ## Accordians
    accordion(
      accordion_panel(
        "Intake Questionnaire",
        icon = bsicons::bs_icon("files"),
        module_ui("intake")
      )
    )
  ),
)

# SERVER ------------------------------------------------------------------

server <- function(input, output, session) {

}

shinyApp(ui = ui, server = server)
gadenbuie commented 10 months ago

Hi @udurraniAtPresage, I think you'll need to check with the authors of the micromodal package. You can link back to this issue for reference. We'll be happy to help debug if we can, but at the moment it doesn't seem like something we can fix in bslib, so I'm going to close this issue.

github-actions[bot] commented 8 months ago

This issue has been automatically locked. If you have found a related problem, please open a new issue (with a reproducible example or feature request) and link to this issue. :raising_hand: Need help? Connect with us on Discord or Posit Community.