title: R Shiny: Shiny.onInputChange working with data-toggle
body: <p>I intend to build a simple router for my shiny application. Here is an example:</p>
  
  <pre><code>library(shiny)
  
  ui &lt;- fluidPage(
    uiOutput("landingPage"),
    tags$script(HTML(
      '$(document.body).on("click", "[navto]",
      function (e) {
        Shiny.onInputChange("navigateTo", $(e.currentTarget).attr("navto"));
      });'
    ))
  )
  
  server &lt;- function(input, output) {
    output$landingPage &lt;- renderUI({
      print(paste("Landing ", input$navigateTo))
      toOut &lt;- pageSplashUI()
      return(toOut)
    })
  }
  
  pageSplashUI &lt;- function() {
    tags$a(href="", navto="GotoNavPage-2", "GotoNavPage-2")
  }
  
  # Run the application 
  shinyApp(ui = ui, server = server)
  </code></pre>
  
  <p>However, the <em><code>output$landingPage</code></em> was refreshed twice with two different <em><code>input$navigateTo</code></em> value after clicking the href link, the first time is the expected "<strong><em>GotoNavPage-2</em></strong>" while the second time is <strong><em>NULL</em></strong>. </p>
  
  <p><a href="https://i.stack.imgur.com/dvdQ9.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/dvdQ9.png" alt="enter image description here"></a></p>
  
  <p>After struggling for some time, I found the issue can be resolved to add <em>data-toggle`="tab"</em> into the href. The only change is as following:</p>
  
  <p>From:</p>
  
  <pre><code>tags$a(href="",  navto="GotoNavPage-2", "GotoNavPage-2")
  </code></pre>
  
  <p>To: </p>
  
  <pre><code>tags$a(href="", `data-toggle`="tab", navto="GotoNavPage-2", "GotoNavPage-2")
  </code></pre>
  
  <p>Now, the program is running as expected:
  <a href="https://i.stack.imgur.com/paJsc.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/paJsc.png" alt="enter image description here"></a></p>
  
  <p>I just don't understand why does the change take effect? What's the usage of <strong><em><code>data-toggle</code>="tab"</em></strong> ?</p>