Shiny: MathJax not working with choices inside selectInput and selectizeInput

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

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)

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)