Shiny app - after clicking on new tab, the tab remains selected by browser

Question

In Shiny apps when you click on a new tab, the tab remains selected/highlighted by the browser. It creates a dotted-line rectangle around the tab, and you have to click elsewhere to have the tab look normal again. Here's an example from RStudio's gallery: http://shiny.rstudio.com/gallery/tabsets.html

This appears to be a default behavior only in Firefox and Internet Explorer, but not Safari nor Chrome.

It's a small issue, but it's annoying enough that I have spent an hour trying to fix it with no success. I want the tab to retain its tab-esque shape at the most important moment of the user's tab-clicking experience!

Any ideas?

Answer 1

You can remove the dotted lines after tab selection by adding some CSS:

library(shiny)
runApp(list(ui = fluidPage(
  titlePanel("Tabsets"),
  sidebarLayout(
    sidebarPanel(
      radioButtons("dist", "Distribution type:",
                   c("Normal" = "norm",
                     "Uniform" = "unif",
                     "Log-normal" = "lnorm",
                     "Exponential" = "exp")),
      br(),
      sliderInput("n", 
                  "Number of observations:", value = 500,
                  min = 1, max = 1000)
    ),
    mainPanel(
      tabsetPanel(type = "tabs", 
                  tabPanel("Plot", plotOutput("plot")), 
                  tabPanel("Summary", verbatimTextOutput("summary")), 
                  tabPanel("Table", tableOutput("table"))
      )
    )
  )
  , tags$head(tags$style(
    HTML(
      ".nav-tabs > .active > a, .nav-tabs > .active > a:hover { outline: 0;}")
  ))
)
, server = function(input, output) {
  data <- reactive({
    dist <- switch(input$dist, norm = rnorm, unif = runif,
                   lnorm = rlnorm, exp = rexp, rnorm)    
    dist(input$n)
  })
  output$plot <- renderPlot({
    dist <- input$dist
    n <- input$n    
    hist(data(), main=paste('r', dist, '(', n, ')', sep=''))
  })
  output$summary <- renderPrint({summary(data())})
  output$table <- renderTable({data.frame(x=data())}) 
})
)

So here

tags$head(tags$style(
    HTML(
      ".nav-tabs > .active > a, .nav-tabs > .active > a:hover { outline: 0;}")
  ))

sets the outline attribute to 0 on the relevant quantities.