RinteRface / shinydashboardPlus

extensions for shinydashboard
https://shinydashboardplus.rinterface.com
Other
454 stars 77 forks source link

Accordions only interact with first accordion in UI #61

Closed RegaCaska closed 4 years ago

RegaCaska commented 4 years ago

Issue

When multiple accordion groups are present on a page, collapsible interaction only occurs with the first accordion to appear in the DOM. Interaction with subsequent accordion groups will not collapse accordions in the same group, but will collapse accordions in the first group.

Reproducible Example

Tested with versions 0.7.0 and 0.7.5.9000 (github latest)

library(shinydashboard)
library(shinydashboardPlus)

ui <- dashboardPagePlus(
  dashboardHeader(),
  dashboardSidebar(),
  dashboardBody(
    box(title = "Accordion List 1",
      accordion(
        accordionItem(
          id = 1,
          title = "Accordion Item 1",
          "Content 1"
        ),
        accordionItem(
          id = 2,
          title = "Accordion Item 2",
          "Content 2"
        )
      )
    ),

    box(title = "Accordion List 2",
      accordion(
        accordionItem(
          id = 3,
          title = "Accordion Item 3",
          "Content 3"
        ),
        accordionItem(
          id = 4,
          title = "Accordion Item 4",
          "Content 4"
        )
      )
    )
  )
)

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

shiny::shinyApp(ui, server)

Any accordionItem in box "Accordion List 2" will collapse accordions in List 1, and both "Accordion Item 4" and "Accordion Item 3" can be open at the same time.

Hypothesized Cause

The accordion function hard-codes the parent div to have id = "accordion" https://github.com/RinteRface/shinydashboardPlus/blob/2fe35b256ca24f68bd34be0738e8829b78cde3c1/R/useful-items.R#L52-L58

and accordionItem hard codes `data-parent` = "#accordion" https://github.com/RinteRface/shinydashboardPlus/blob/2fe35b256ca24f68bd34be0738e8829b78cde3c1/R/useful-items.R#L90-L97

Thus, multiple accordion groups lead to two divs with the same id (#accordion), and all accordionItems reference the same id as their parent. An assumption is that data-parent is used to decide which accordionItems to close. With multiple divs sharing the id of accordion, only the first div has the collapse logic applied to it.

Hypothesized Resolution

Parameterize the accordion id in both the accordion and accordionItem functions, defaulted to "accordion". It would be nice to only have to specify the id in accordion which injects the id into the accordionItem children; but this would likely lead to a significantly more complex and fragile implementation of accordion.

DivadNojnarg commented 4 years ago

Thanks. Indeed, accordion is one of the first function I added to shinydashboardPlus. I applied a patch like I did for bs4Dash (https://github.com/RinteRface/bs4Dash/blob/master/R/useful-items.R). Ultimately, I will rework it to do it from Javascript instead (to have a cleaner code on the R side) because my idea is that you will be able to access the currently open item through inputId from accordion and trigger some action on the server side...