[Bug]: <Default displayed tabitem not working for teal 0.12.0>

Wyy-Wei commented 11 months ago

What happened?

Hi, We're using teal for our dashboard and we have a user guide tab that contains several tabItems.

Before when we're using teal 0.11.1, the user guide tab works fine. When we click on user tab, the first tabItem will show by default.
Recently we upgraded to teal 0.12.0, and the user guide doesn't have a default tabItem anymore. We have to click on one of the tabs for it to show up.

Here's the simple example code I have to demonstrate this issue.

library(shinydashboard)

ui_app_user_guide <- function(id) {
  dashboardPage(
    dashboardHeader(title = "User Guide"),
    dashboardSidebar(
      sidebarMenu(
        menuItem(
          "Overview",
          tabName = "overview",
          icon = icon("info")
        )
      )
    ),
    dashboardBody(
      tabItems(
        # tab content start
        tabItem(tabName = "overview",
                tags$head(tags$style(
                  HTML("
                       body {background-color: #dee5e7; color: #000000;}
                       .box.box-solid.box-primary>.box-header {background:#96c6d9; color:#ffffff;}"
                  )
                )),
                fluidRow(
                  box(
                    title = "This dashboard",
                    status = "primary",
                    solidHeader = TRUE,
                    collapsible = T,
                    width = "100%",
                    h4("Rationale")
                  )
                ))
      ) # ends tabItems
    ) # ends dashboardBody
  ) # ends dashboardPage

}

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

}

tm_app_user_guide <- function(label) {
  teal::module(
    label = label,
    server = srv_app_user_guide,
    ui = ui_app_user_guide,
    filters = NULL
  )
}

# app ---------------------------------------------------------------------
app <- teal::init(
  data = teal.data::teal_data(
    teal.data::dataset("IRIS", iris, code = "IRIS <- iris"),
    check = TRUE
  ),
  modules = teal::modules(
    tm_app_user_guide(label = "User Guide")
  )
)

shiny::shinyApp(app$ui, app$server)

shiny::shinyApp(ui_app_user_guide, srv_app_user_guide)

This is a simple page with one tab. For the last two lines, we run either one of them to run the app.

shiny::shinyApp(app$ui, app$server) uses teal modules, and when running this, the app does not have a default tab on display. We have to click on overview for it to show.
shiny::shinyApp(ui_app_user_guide, srv_app_user_guide) feeds the ui and server function directly so it does not use teal modules, and we have the overview tab displayed by defaults.

We will be really appreciate it if you could kindly provide us any input on this to help us understand this better. Thank you so much in advance!

sessionInfo()

R version 4.0.3 (2020-10-10)
Platform: x86_64-pc-linux-gnu (64-bit)
Running under: Red Hat Enterprise Linux

Matrix products: default
BLAS/LAPACK: /usr/lib64/libopenblas-r0.3.3.so

locale:
 [1] LC_CTYPE=en_US.UTF-8       LC_NUMERIC=C               LC_TIME=en_US.UTF-8       
 [4] LC_COLLATE=en_US.UTF-8     LC_MONETARY=en_US.UTF-8    LC_MESSAGES=en_US.UTF-8   
 [7] LC_PAPER=en_US.UTF-8       LC_NAME=C                  LC_ADDRESS=C              
[10] LC_TELEPHONE=C             LC_MEASUREMENT=en_US.UTF-8 LC_IDENTIFICATION=C       

attached base packages:
[1] stats     graphics  grDevices utils     datasets  methods   base     

other attached packages:
[1] shinydashboard_0.7.1 shiny_1.8.0         

loaded via a namespace (and not attached):
 [1] tidyselect_1.1.0     xfun_0.41            bslib_0.6.1         
 [4] shinyjs_2.0.0        purrr_0.3.4          colorspace_1.4-1    
 [7] vctrs_0.6.4          generics_0.1.3       htmltools_0.5.7     
[10] yaml_2.3.5           utf8_1.1.4           rlang_1.1.0         
[13] jquerylib_0.1.4      later_1.1.0.1        pillar_1.9.0        
[16] glue_1.6.2           lifecycle_1.0.3      teal.logger_0.1.3   
[19] munsell_0.5.0        gtable_0.3.1         fontawesome_0.5.2   
[22] teal.slice_0.3.0     teal.widgets_0.4.2   teal.data_0.3.0     
[25] memoise_2.0.1        evaluate_0.16        knitr_1.45          
[28] fastmap_1.1.1        teal_0.12.0          httpuv_1.5.4        
[31] shinyWidgets_0.8.0   fansi_1.0.3          Rcpp_1.0.5          
[34] xtable_1.8-4         promises_1.1.1       backports_1.4.1     
[37] scales_1.3.0         checkmate_2.3.1      cachem_1.0.8        
[40] jsonlite_1.8.5       mime_0.12            ggplot2_3.4.4       
[43] digest_0.6.29        formatters_0.5.5     dplyr_1.0.2         
[46] grid_4.0.3           cli_3.6.1            tools_4.0.3         
[49] magrittr_2.0.3       logger_0.2.2         sass_0.4.8          
[52] teal.transform_0.4.0 tibble_3.0.4         crayon_1.5.1        
[55] pkgconfig_2.0.3      ellipsis_0.3.1       teal.reporter_0.2.1 
[58] rmarkdown_2.25       rstudioapi_0.11      R6_2.5.1            
[61] compiler_4.0.3

Relevant log output

No response

Code of Conduct

[X] I agree to follow this project's Code of Conduct.

Contribution Guidelines

[X] I agree to follow this project's Contribution Guidelines.

Security Policy

[X] I agree to follow this project's Security Policy.

npaszty commented 8 months ago

@lcd2yyz

any updates on this issue? thanks!

donyunardi commented 8 months ago

I'm using latest teal (0.15.1) but you can try my solution.

I just added the class = 'active' argument to the tabItem and the box shows.

Code

```r library(shinydashboard) library(teal) ui_app_user_guide <- function(id) { ns <- NS(id) dashboardPage( dashboardHeader(title = "User Guide"), dashboardSidebar( sidebarMenu( menuItem( "Overview", tabName = "overview", icon = icon("info") ) ) ), dashboardBody( tabItems( # tab content start tabItem( tabName = "overview", class = "active", tags$head(tags$style( HTML(" body {background-color: #dee5e7; color: #000000;} .box.box-solid.box-primary>.box-header {background:#96c6d9; color:#ffffff;}" ) )), fluidRow( box( title = "This dashboard", status = "primary", solidHeader = TRUE, collapsible = T, width = "100%", h4("Rationale") ) ) ) ) # ends tabItems ) # ends dashboardBody ) # ends dashboardPage } srv_app_user_guide <- function(id, data) { moduleServer(id, function(input, output, session) { }) } tm_app_user_guide <- function(label) { teal::module( label = label, server = srv_app_user_guide, ui = ui_app_user_guide ) } # app --------------------------------------------------------------------- app <- teal::init( data = teal.data::teal_data( IRIS = iris ), modules = teal::modules( tm_app_user_guide(label = "User Guide") ) ) shiny::shinyApp(app$ui, app$server) ```

sessionInfo

```r R version 4.3.2 (2023-10-31) Platform: x86_64-apple-darwin20 (64-bit) Running under: macOS Ventura 13.6.3 Matrix products: default BLAS: /System/Library/Frameworks/Accelerate.framework/Versions/A/Frameworks/vecLib.framework/Versions/A/libBLAS.dylib LAPACK: /Library/Frameworks/R.framework/Versions/4.3-x86_64/Resources/lib/libRlapack.dylib; LAPACK version 3.11.0 locale: [1] en_US.UTF-8/en_US.UTF-8/en_US.UTF-8/C/en_US.UTF-8/en_US.UTF-8 time zone: America/Los_Angeles tzcode source: internal attached base packages: [1] stats graphics grDevices utils datasets methods base other attached packages: [1] teal_0.15.0.9003 teal.slice_0.5.0.9003 teal.data_0.5.0.9000 teal.code_0.5.0.9003 shiny_1.8.0 [6] shinydashboard_0.7.2 loaded via a namespace (and not attached): [1] sass_0.4.8 utf8_1.2.4 generics_0.1.3 teal.reporter_0.3.0.9002 [5] digest_0.6.33 magrittr_2.0.3 evaluate_0.22 grid_4.3.2 [9] fastmap_1.1.1 jsonlite_1.8.8 backports_1.4.1 formatR_1.14 [13] promises_1.2.1 fansi_1.0.6 jquerylib_0.1.4 cli_3.6.2 [17] rlang_1.1.2 ellipsis_0.3.2 cachem_1.0.8 yaml_2.3.7 [21] tools_4.3.2 memoise_2.0.1 checkmate_2.3.1 dplyr_1.1.4 [25] httpuv_1.6.13 vctrs_0.6.5 teal.widgets_0.4.2.9005 logger_0.2.2 [29] R6_2.5.1 mime_0.12 lifecycle_1.0.4 shinycssloaders_1.0.0 [33] fontawesome_0.5.2 shinyjs_2.1.0 pkgconfig_2.0.3 teal.logger_0.1.3.9011 [37] bslib_0.6.1 pillar_1.9.0 later_1.3.2 glue_1.6.2 [41] Rcpp_1.0.11 tidyselect_1.2.0 xfun_0.40 tibble_3.2.1 [45] knitr_1.44 xtable_1.8-4 htmltools_0.5.7 rmarkdown_2.25 [49] shinyWidgets_0.8.0 compiler_4.3.2 ```

@Wyy-Wei can you try this?

Wyy-Wei commented 8 months ago

We're using teal 0.14.0 and it works too! Thank you so much! 😃

donyunardi commented 8 months ago

That's great to hear. If you're still early in your development, I would recommend to switch to 0.15.1. You can checkout the migration guide here.

It's interesting use case to see teal module is being used on shinydashboard. I don't believe we ever pressure-test the modules against different UI framework but it's good to know that this is possible.

insightsengineering / teal