Shiny: MathJax not working with choices inside selectInput and selectizeInput

[kiendang]

I want to create a dropdown menu with the choices containing math symbols, but it seems MathJax does not work with labels of choices inside selectInput and selectizeInput.

This is the minimal code using selectizeInput:

library(shiny)

ui <- shinyUI(fluidPage(
  withMathJax(),
  titlePanel("Title"),
  sidebarLayout(
    sidebarPanel(
      selectizeInput('select', label = "Select",
                     choices = list("\\(\\gamma\\)" = 1, "\\(\\beta\\)" = 2))
    ),
    mainPanel()
  )
))

server <- shinyServer(function(input, output) {

})

shinyApp(ui = ui, server = server)

After the page first loads, MathJax works for the selected item, but not the choices.

After another choice other than default is selected, MathJax stops working for the selected item.

The same goes for selectInput.

[M-E-Rademaker]

Have you or anyone found a workaround. Im struggeling with the same...

[bborgesr]

There's a way to do this if you use HTML (instead of MathJax) and some JS in the options argument of updateSelectizeInput. Here's a minimal repro:

library(shiny)

greekNames <- list("alpha", "beta", "gamma", "delta", "epsilon")
greekCodes <- list("&#945;", "&#946;", "&#947;", "&#948;", "&#949;")
greek <- setNames(greekNames, greekCodes)

ui <- fluidPage(
  selectizeInput("select", label = "Select", choices = NULL),
  textOutput("txt")
)

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

  updateSelectizeInput(
    session, "select",
    choices = greek,
    options = list(render = I("
      {
        item:   function(item, escape) { return '<div>' + item.label + '</div>'; },
        option: function(item, escape) { return '<div>' + item.label + '</div>'; }
      }
    "))
  )

  output$txt <- renderText({
    paste("You chose", input$select)
  })
}

shinyApp(ui, server)

---

FYI, if you don't mind using checkboxGroupInput or radioButtons instead of the selectizeInput, there's an even easier way to do this (using the relatively new choiceNames and choiceValues arguments):

library(shiny)

greekNames <- list("alpha", "beta", "gamma", "delta", "epsilon")
greekCodes <- list("&#945;", "&#946;", "&#947;", "&#948;", "&#949;")
greekHtml <- lapply(greekCodes, HTML)

ui <- fluidPage(
  checkboxGroupInput("box", "Choose one or more greek letters",
    choiceNames = greekHtml,
    choiceValues = greekNames
  ),
  radioButtons("radio", "Choose one greek letter",
    choiceNames = greekHtml,
    choiceValues = greekNames
  ),
  textOutput("selected_boxes"),
  textOutput("selected_buttons")
)

server <- function(input, output, session) {
  output$selected_boxes <- renderText({
    paste("Checkboxes: you chose", paste(input$box, collapse = ", "))
  })

  output$selected_buttons <- renderText({
    paste("Radio buttons: you chose", input$radio)
  })
}

shinyApp(ui, server)

[stla]

FYI, the math rendering works fine with katex.

library(shiny)

greekNames <- list("alpha", "beta")
greekCodes <- list("\\\\\\alpha", "\\\\\\beta") # note the six backslahes
greek <- setNames(greekNames, greekCodes)

ui <- fluidPage(
  tags$head(
    tags$link(rel="stylesheet", href="https://cdn.jsdelivr.net/npm/[email protected]/dist/katex.min.css", integrity="sha384-9tPv11A+glH/on/wEu99NVwDPwkMQESOocs/ZGXPoIiLE8MU/qkqUcZ3zzL+6DuH", crossorigin="anonymous"),
    tags$script(src="https://cdn.jsdelivr.net/npm/[email protected]/dist/katex.min.js", integrity="sha384-U8Vrjwb8fuHMt6ewaCy8uqeUXv4oitYACKdB0VziCerzt011iQ/0TqlSlv8MReCm", crossorigin="anonymous")
  ),
  selectizeInput("select", label = "Select", choices = NULL),
  textOutput("txt")
)

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

  updateSelectizeInput(
    session, "select",
    choices = greek,
    options = list(render = I("
    {
    item:   function(item, escape) { 
      var html = katex.renderToString(item.label);
      return '<div>' + html + '</div>'; 
    },
    option: function(item, escape) { 
      var html = katex.renderToString(item.label);
      return '<div>' + html + '</div>'; 
    }
    }
                              "))
    )

  output$txt <- renderText({
    paste("You chose", input$select)
  })
  }

shinyApp(ui, server)