Shiny error messages aren't shown when container has `display: flex`

[gadenbuie]

From rstudio/shiny#4316, when htmlwidgets are used inside cards in Quarto dashboard, Quarto effectively adds display: flex to htmlwidget containers.

The issue is that renderError only inserts the validation error message when the parent container has display in inline, inline-block, or block`.

htmlwidgets/inst/www/htmlwidgets.js

Lines 337 to 347 in 2172bba

	var display = $el.css("display");
	$el.data("restore-display-mode", display);
	if (display === "inline" || display === "inline-block") {
	$el.hide();
	if (err.message !== "") {
	var errorSpan = $("<span>").addClass(errClass);
	errorSpan.text(err.message);
	$el.after(errorSpan);
	}
	} else if (display === "block") {

Reprex App

Here's a small Shiny app that replicates the behavior

library(ggplot2)
library(plotly)
library(shiny)
library(bslib)

dat <- iris

ui <- page_sidebar(
  title = "validation() reprex",

  sidebar = sidebar(
    uiOutput("width_slider"),
    p("Set min width to a high value (e.g., > 5) to trigger the validation message.")
  ),

  tags$style(".plotly.html-widget { display: flex } "),

  layout_columns(
    card(
      card_header("Plot - message is not triggered"),
      plotlyOutput("fig")
    ),
    card(
      card_header("Table - message is triggered"),
      tableOutput("ex_table")
    )
  )
)

server <- function(input, output, session) {
  output$width_slider <- renderUI({
    sliderInput(
      "min_width",
      label = "Select Min Width",
      min = 0,
      max = 6,
      value = 0
    )
  })

  dat_filt <- reactive({
    req(input$min_width)

    dat_filt <- dat[which(dat$Sepal.Width > as.numeric(input$min_width)), ]

    return(dat_filt)
  })

  output$fig <- renderPlotly({
    validate(
      need(nrow(dat_filt()) > 0, "No data. Please adjust filters.")
    )

    p <- ggplot(dat_filt(), aes(Sepal.Width, Sepal.Length)) +
      geom_point()

    ggplotly(p)
  })

  output$ex_table <- renderTable({
    validate(
      need(nrow(dat_filt()) > 0, "No data. Please adjust filters.")
    )
    dat_filt()
  })
}

shinyApp(ui = ui, server = server)