Switching to nav_panel_hidden shows a line on the nav bar

[udurraniAtPresage]

Problem

When the app switches to a hidden nav panel due to a click of a button, a line appears on the navbar with no title. This did not happen on bslib version 0.7.0 but is happening on version 0.8.0. Here's an example:

library(shiny)
library(bslib)

ui <- page_navbar(
  id = "app",
  nav_panel(
    title = "Tab 1",
    input_task_button("to_hidden_panel", "Go to hidden panel")
  ),
  nav_panel_hidden(
    value = "Tab 2",
    "Content"
  )
)

server <- function(input, output, session) {
  observeEvent(input$to_hidden_panel, {
    nav_select("app", selected = "Tab 2")
  })
}

shinyApp(ui, server)

Session Info

─ Session info ─────────────────────────────────
 setting  value
 version  R version 4.3.2 (2023-10-31 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     2024-09-27
 rstudio  2024.04.2+764 Chocolate Cosmos (desktop)
 pandoc   NA

─ Packages ─────────────────────────────────────
 package     * version date (UTC) lib source
 bslib       * 0.8.0   2024-07-29 [1] CRAN (R 4.3.3)
 cachem        1.1.0   2024-05-16 [1] CRAN (R 4.3.3)
 cli           3.6.2   2023-12-11 [1] CRAN (R 4.3.2)
 devtools    * 2.4.5   2022-10-11 [1] CRAN (R 4.3.2)
 digest        0.6.34  2024-01-11 [1] CRAN (R 4.3.2)
 ellipsis      0.3.2   2021-04-29 [1] CRAN (R 4.3.1)
 fastmap       1.2.0   2024-05-15 [1] CRAN (R 4.3.3)
 fs            1.6.3   2023-07-20 [1] CRAN (R 4.3.1)
 glue          1.7.0   2024-01-09 [1] CRAN (R 4.3.2)
 htmltools     0.5.8   2024-03-25 [1] CRAN (R 4.3.3)
 htmlwidgets   1.6.4   2023-12-06 [1] CRAN (R 4.3.2)
 httpuv        1.6.13  2023-12-06 [1] CRAN (R 4.3.2)
 jquerylib     0.1.4   2021-04-26 [1] CRAN (R 4.3.1)
 jsonlite      1.8.8   2023-12-04 [1] CRAN (R 4.3.2)
 later         1.3.2   2023-12-06 [1] CRAN (R 4.3.2)
 lifecycle     1.0.4   2023-11-07 [1] CRAN (R 4.3.2)
 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)
 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)
 pkgbuild      1.4.3   2023-12-10 [1] CRAN (R 4.3.2)
 pkgload       1.3.3   2023-09-22 [1] CRAN (R 4.3.2)
 profvis       0.3.8   2023-05-02 [1] CRAN (R 4.3.1)
 promises      1.3.0   2024-04-05 [1] CRAN (R 4.3.3)
 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.12  2024-01-09 [1] CRAN (R 4.3.2)
 remotes       2.4.2.1 2023-07-18 [1] CRAN (R 4.3.1)
 rlang         1.1.3   2024-01-10 [1] CRAN (R 4.3.2)
 rstudioapi    0.15.0  2023-07-07 [1] CRAN (R 4.3.1)
 sass          0.4.9   2024-03-15 [1] CRAN (R 4.3.3)
 sessioninfo   1.2.2   2021-12-06 [1] CRAN (R 4.3.1)
 shiny       * 1.9.1   2024-08-01 [1] CRAN (R 4.3.3)
 stringi       1.8.3   2023-12-11 [1] CRAN (R 4.3.2)
 stringr       1.5.1   2023-11-14 [1] CRAN (R 4.3.2)
 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)
 vctrs         0.6.5   2023-12-01 [1] CRAN (R 4.3.2)
 xtable        1.8-4   2019-04-21 [1] CRAN (R 4.3.1)

[abrahammbs93]

I have the exact same issue

[acomandon]

Has anyone had luck resolving this issue?

[udurraniAtPresage]

Looking at the generated html, I see:

<a href="#tab-4760-2" data-toggle="tab" data-bs-toggle="tab" data-value="Tab 2" class="nav-link active" aria-selected="true" role="tab"></a>

So, I asked shiny assistant to remove the bottom border and it provided the following working solution:

library(shiny)
library(bslib)

ui <- page_navbar(
  id = "app",
  theme = bs_theme() |> bs_add_rules("
    /* Remove border-bottom for hidden panel's nav link when active */
    .nav-item > .nav-link:empty {
      border-bottom: none !important;
    }
  "),
  nav_panel(
    title = "Tab 1",
    input_task_button("to_hidden_panel", "Go to hidden panel")
  ),
  nav_panel_hidden(
    value = "Tab 2",
    "Content"
  )
)

server <- function(input, output, session) {
  observeEvent(input$to_hidden_panel, {
    nav_select("app", selected = "Tab 2")
  })
}

shinyApp(ui, server)

Let me know if it works for you. I hope that shiny team fixes this so that this CSS is not needed.

[gadenbuie]

Thanks for opening the issue with a great reprex @udurraniAtPresage! The Shiny assistant was pretty close -- that certainly works but there's a different root cause that will be fixed by #1170. I'll merge it in shortly.