Cannot add sortable::rank_list() inside of a shinyalert or modal

Question

I am trying to add a rank_list from the sortable library in a Shiny application. This seems to work fine if the input is in the fluid page part of the UI. When I add it to a shinyalert() or a modal, the input shows up in popup but the choices aren't sortable or even selectable.

In the repex below I have added a selectInput to see if it renders that correctly and interactively - it does.

library(shiny)
library(sortable)
library(shinyalert)

labels <- list(
  "one",
  "two",
  "three",
  htmltools::tags$div(htmltools::em("Complex"), " html tag without a name"),
  "five" = htmltools::tags$div(htmltools::em("Complex"), " html tag with name: 'five'")
)
rank_list_multi <- rank_list(
  text = "You can select multiple items, then drag as a group",
  labels = labels,
  input_id = "rank_list_multi",
  options = sortable_options(multiDrag = TRUE)
)



ui <- fluidPage(rank_list_multi,
                actionButton("showAlert", "Show in popup"))


server <- function(input, output, session) {
  observeEvent(input$showAlert, {
    print("Show popup")
    
    shinyalert(
      title = "Reorder this object",
      html = TRUE,
      closeOnClickOutside = TRUE,
      showConfirmButton = TRUE,
      text = tagList(
        rank_list_multi,
        br(),
        selectInput("alertTextInput", "Select Letter", choices = c("a", "b", "C"))
      )
      
    )
    
  })
}

shinyApp(ui, server)

Sortable working on the main page:

Sortable NOT working in the pop up modal:

I saw this link asking the same but not for the shiny package sortable Any help is appreciated

Answer 1

The Issue

The problem here is that you're trying to use the same UI object in two locations: the rank_list_multi appears in both the main fluidPage and in the shinyalert.

You should create two separate sortable objects each with a unique input_id. You can do this using a generator function like I've constructed below.

Example Solution

library(shiny)
library(sortable)
library(shinyalert)


#' Construct a sortable rank list object.
#' 
#' @param input_id The shiny ID used to construct the rank list.
construct_rank_list <- function(input_id) {
  sortable::rank_list(
    text = "Drag to Reorder",
    labels = c(1:5),
    input_id = input_id,
    options = sortable_options(multiDrag = TRUE)
  )
}


ui <- fluidPage(construct_rank_list("rank_list_multi"),
                actionButton("showAlert", "Show in popup"))


server <- function(input, output, session) {
  observeEvent(input$showAlert, {
    shinyalert::shinyalert(
      title = "Reorder this object",
      html = TRUE,
      closeOnClickOutside = TRUE,
      showConfirmButton = TRUE,
      text = tagList(
        construct_rank_list("rank_list_modal")
      )
    )
  })
}

shinyApp(ui, server)