`display: contents;` unexpected behavior - non-visible parts react

Shiny
,
1

Let me start with the example:

# shiny        * 1.14.0
# bslib        * 0.12.0

library(shiny)
library(bslib)

ui <- bslib::page_fixed(
  theme = bslib::bs_theme() |>
    bslib::bs_add_rules("
      .full-width-children{
        display: contents;
      }
      
      .full-width-children .shiny-input-container{
        width: 100%;
      }
    "),
  bslib::navset_tab(
    bslib::nav_panel(
      title = "tab1",
      card(
        card_header("test"),
        card_body(
          checkboxGroupInput(
            inputId = "maincheckbox",
            label = "checkbox",
            choices = c(setNames(LETTERS[1:3], LETTERS[1:3]))
          )
        )
      )
    ),
    bslib::nav_panel(
      title = "tab2",
      card(
        card_header("test"),
        tags$div(
          uiOutput("output1"),
          uiOutput("output2"),
          class = "full-width-children"
        )
      )
    )
  )
)

server <- function(input, output, session) {
  
  output[["output1"]] <- renderUI({
    cat("render\n")
    checkboxInput(inputId = "checkbox1", label = "Checkbox1")
  }) |> bindEvent(input$maincheckbox)
  
  output[["output2"]] <- renderUI({
    conditionalPanel(
      "input?.checkbox1",
      checkboxInput(inputId = "checkbox2", label = "Checkbox2")
    )
  }) |> bindEvent(input$maincheckbox)
}

shinyApp(ui, server)

Now, after running app:

  1. Tab1: check "A";
  2. go to Tab2 - check both checkboxes (there should be render in console);
  3. go to Tab1 - check "B" immediately (there should be another render in console);

I expect that checkbox1 is rendered only when visible (different tab - Tab2), but it is regenerated immediately after maincheckbox change.

When

.full-width-children{
  display: contents;
}

is removed, checkbox1 is rendered as expected (immediately after switching to the Tab2).

Is this caused by "IntersectionObserver observes boxless display:contents wrapper, breaking visibility detection for dynamic outputs" bug? Any recommendations?

2

Thanks! I do think it's another example of that issue, so I added your app to the issue thread.

1 Like