tabsetPanel: browsers behave differently on mouse click and character input

Hello,

Newly, browsers tend to behave differently when entering a character on the keyboard after clicking a tab.
Below is a slightly adapted "Hello Shiny" example which uses tabsetPanel.
A ready-to-use example is given by a Shiny User Showcase, the COVID-19 tracker region plot (COVID-19 tracker)

Safari (15.4) puts a blue frame around the tab (and also around a selected block), Chrome (100.0.4896.127) puts a black frame, and Firefox behaves as Safari and Chrome behaved before: it puts no frame. This Firefox behavior is the one I would like to regain.

How do I proceed?

keywords: html css bootstrap

# test for tabsetPanel behavior
library(shiny)

ui <- fluidPage(# App title ----
                titlePanel("Hello Shiny!"),
                
                # Sidebar layout with input and output definitions ----
                sidebarLayout(# Sidebar panel for inputs ----
                              sidebarPanel(
                                # Input: Slider for the number of bins ----
                                sliderInput(
                                  inputId = "bins",
                                  label = "Number of bins:",
                                  min = 1,
                                  max = 50,
                                  value = 30
                                )
                              ),
                              
                              # Main panel for displaying outputs ----
                              mainPanel(
                                tabsetPanel(
                                  tabPanel("Plot", plotOutput(outputId = "distPlot")),
                                  tabPanel("Summary", verbatimTextOutput("summary")),
                                  tabPanel("Table", tableOutput("table"))
                                )
                              )))

server <- function(input, output) {
  output$distPlot <- renderPlot({
    x    <- faithful$waiting
    bins <- seq(min(x), max(x), length.out = input$bins + 1)
    hist(
      x,
      breaks = bins,
      col = "#75AADB",
      border = "white",
      xlab = "Waiting time to next eruption (in mins)",
      main = "Histogram of waiting times"
    )
  })
}

shinyApp(ui = ui, server = server)

what helps, at least in the case of the fluidPage example, is an upgrade to bootstrap version 4:

ui <- fluidPage(# App title ----
                theme = bslib::bs_theme(version = 4),      #  <------ upgrade to bootstrap version 4
                titlePanel("Hello Shiny!"),

I wished this option also existed for Shiny's dashboardPage which I use in my app.

This topic was automatically closed 54 days after the last reply. New replies are no longer allowed.

If you have a query related to it or one of the replies, start a new topic and refer back with a link.