Bucket lists with same group name have the same html id

[zhengzheli]

It seems the bucket list id is determined by the group name, e.g. if the group name is bucket_list_group, the id is bucket-list-bucket_list_group.

library(shiny)
library(sortable)
library(dplyr)
library(htmlwidgets)

ui <- shinyUI(
    fillPage(
        tags$head(
            tags$style(HTML("
                            .rank-list {
                                border:dashed;
                                overflow-y: auto;
                                height: 200px;
                            }
                            
                            .rank-list-item {
                                height: 35px;
                                width:200px;
                                margin-left:5px;
                                margin-top:5px;
                            }
 
                            .default-sortable .rank-list.rank-list-empty {
                                border-color: black
                            }
                            "))
        ),
        fillRow(sidebarLayout(
            sidebarPanel(
                bucket_list(
                    header = "Variables to use",
                    group_name = "bucket_list_group",
                    orientation = "horizontal",
                    add_rank_list(
                        text = "... to here",
                        labels = NULL,
                        input_id = "sortable_list_selected_variables",
                        options = sortable_options(onAdd = htmlwidgets::JS("function(event) { console.log(event.item.innerText); }"))
                    )
                ),                         
                width = 6
            ),
            mainPanel(
                br(),
                uiOutput("dynamic_bucket_list"),
                width = 6
            ),
            position = "right",
            fluid = FALSE
        ))))

server = shinyServer(function(input, output, session) {
        output$dynamic_bucket_list <- renderUI({
            bucket_list(
                header = "Column names",
                group_name = "bucket_list_group",
                orientation = "horizontal",
                add_rank_list(
                    text = "Drag items from here ...",
                    labels = as.list("A"),
                    input_id = "sortable_list_raw_dataset_column_names"
                )
            )
        })
})

shinyApp(ui = ui, server = server)