Order of JS scripts causes dropdown issues

[ashbaldry]

The current order of calling the JS files in semanticPage is causing issues for dropdown_input when you include "button" in the class. If you put the dropdown JS after the button JS script it seems to resolve the issue.

Example:

library(shiny)
library(shiny.semantic)

search_dropdown <-  shiny.semantic::dropdown_input(
  "simple_dropdown", letters, default_text = "Search Word...", type = "labeled search icon button"
)
search_dropdown$attribs$style <- "min-width: 190px;"
search_dropdown$children[[2]]$attribs$class <- "ui search icon"

ui <- function() {
  shinyUI(
    semanticPage(
      title = "Dropdown example",
      search_dropdown,
      p("Selected letter:"),
      textOutput("selected_letter"),
    )
  )
}

server <- shinyServer(function(input, output, session) {
  output$selected_letter <- renderText(input[["simple_dropdown"]])
})

shinyApp(ui = ui(), server = server)

[anirbanshaw24]

Hi, The problem lies with same CSS and JS names. In this case the class button is a CSS class. The JS shiny-semantic-button.js is also looking for ID button. According to the order of specifying the JS files, the dropdown is first built and then it is overqritten by the button JS. Putting the button JS on top resolves this as finally the dropdown JS is overwriting it. Also if button JS is removed altogether, it will work simply because there is no JS overwriting the drodown JS.

The problem can be fixed by asking JS to find a different keyword for button.

find: function(scope) {
   return $(scope).find('.shiny-semantic-button');
},

Like for dropdown, the JS actually finds semantic-select-input here:

  find: function(scope) {
    return $(scope).find('.semantic-select-input');
  },

Of course this will mean we need to update the JS binding element ID wherever shiny-semantic-button.js is actually needed.