Card with value_box() shows the "Expand" button despite having #| expandable: false

[etiennebacher]

Description

This document produces a value box that has an "Expand" button in the bottom right, even though I specified #| expandable: false as explained in the docs:

---
format: dashboard
---
## Column 
```{r}
#| expandable: false
bslib::value_box(title = "x", value = 1, theme = "primary")
```

Replacing the call to value_box() by plot(mtcars) works fine (no "Expand" button) so it probably comes from the interaction between Quarto and bslib.

Is this a bug or am I missing something?

---

Quarto 1.9.38
bslib 0.11.0.9000
Ubuntu 24.04

[mcanouil]

Isn't coming from bslib::value_box?

[etiennebacher]

Maybe, but there are some fixed issues related to value_box() on this repo (e.g. #7361) so I don't know if it should be reported here or in bslib.

[mcanouil]

I'll look into it and get back.

[mcanouil]

A dashboard cell that outputs a bslib component such as bslib::value_box() never receives its card options. In dashboard.lua the raw bslib- HTML is detected and passed through "unharmed", so #| expandable: false is dropped and no data-expandable attribute reaches the value box. Later, processCards treats the box like any .card, and because a bslib value box carries the class bslib-value-box rather than Quarto's own valuebox, the default expandable handler falls back to the document default (true) and injects the Expand button.

Workarounds

• Use Quarto's native value box instead of bslib::value_box() so the card gets the valuebox class and no Expand button, via a #| content: valuebox cell returning a list, e.g. list(title = "x", value = 1, color = "primary").
• Disable expansion for the whole dashboard by setting expandable: false in the document YAML, which flips the dashboardMeta.expandable default so the fallback returns "false".
• Note that full_screen = FALSE in bslib::value_box() does not help, because the button is Quarto's injected kExpandBtnHtml, not bslib's.

---

When a cell is executed, dashboard.lua walks its output looking for raw bslib- HTML. bslib::value_box() emits exactly such a block, so it is captured into bslibRawOutputs and removed from the cell output with pandoc.Null().

• quarto-cli/src/resources/filters/quarto-post/dashboard.lua

  Lines 272 to 279 in 6ebb5db

  	if #childDiv.content == 1 and childDiv.content[1].t == "RawBlock" and childDiv.content[1].format == "html" then
  	if childDiv.content[1].text:match('bslib-') ~= nil then
  	-- capture any raw blocks that we see
  	bslibRawOutputs:insert(childDiv.content[1])
  	-- Don't emit these within the cell outputs
  	return pandoc.Null()
  	end

The captured block is then re-emitted directly. readOptions(el) and makeCard(...) are called only on el.content, i.e. the remaining non-bslib cell content, so the card built from the options is separate from the value box. The value box itself passes through with none of the cell options (expandable, fill, title) applied, which is why #| expandable: false has no effect.

• quarto-cli/src/resources/filters/quarto-post/dashboard.lua

  Lines 292 to 304 in 6ebb5db

  	if #bslibRawOutputs > 0 then
  	-- If bslib outputs were detected, we need to elevate those rawblocks and
  	-- just allow them to pass through the system unharmed along side
  	-- the cell and any of its other output
  	local result = pandoc.Blocks(bslibRawOutputs)
  	if el ~= nil and #el.content > 0 then
  	local options, userClasses = dashboard.card.readOptions(el)
  	local card = dashboard.card.makeCard(el.content, userClasses, options)
  	if card ~= nil then
  	result:insert(card)
  	end
  	end
  	return result

During HTML post-processing, processCards selects every .card in the document. A bslib value box renders as a .card, so it is processed here.

• quarto-cli/src/format/dashboard/format-dashboard-card.ts

  Line 130 in 6ebb5db

  const cardNodes = doc.body.querySelectorAll(`.${kCardClass}`);

The Expand button is Quarto's own, defined as kExpandBtnHtml, not something bslib adds. Passing full_screen = FALSE to value_box() therefore does not remove it.

• quarto-cli/src/format/dashboard/format-dashboard-card.ts

  Lines 28 to 37 in 6ebb5db

  	const kExpandBtnHtml = `
  	<bslib-tooltip placement="auto" bsoptions="[]" data-require-bs-version="5" data-require-bs-caller="tooltip()">
  	<template>Expand</template>
  	<span class="bslib-full-screen-enter badge rounded-pill">
  	<svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 24 24" style="height:1em;width:1em;" aria-hidden="true" role="img"><path d="M20 5C20 4.4 19.6 4 19 4H13C12.4 4 12 3.6 12 3C12 2.4 12.4 2 13 2H21C21.6 2 22 2.4 22 3V11C22 11.6 21.6 12 21 12C20.4 12 20 11.6 20 11V5ZM4 19C4 19.6 4.4 20 5 20H11C11.6 20 12 20.4 12 21C12 21.6 11.6 22 11 22H3C2.4 22 2 21.6 2 21V13C2 12.4 2.4 12 3 12C3.6 12 4 12.4 4 13V19Z"></path></svg>
  	</span>
  	</bslib-tooltip>
  	`;
  	// Card classes

The kAttrExpandable handler adds that button whenever the attribute value is not "false". Since the value box has no data-expandable attribute (it was dropped in dashboard.lua), defaultValue decides. It suppresses the button only when the element has Quarto's value-box class kValueboxClass or a flow layout; otherwise it returns dashboardMeta.expandable.

• quarto-cli/src/format/dashboard/format-dashboard-card.ts

  Lines 82 to 101 in 6ebb5db

  	attr: kAttrExpandable,
  	handle: (el: Element, attrValue: string) => {
  	if (attrValue !== "false") {
  	const shellEl = doc.createElement("DIV");
  	shellEl.innerHTML = kExpandBtnHtml;
  	for (const childEl of shellEl.children) {
  	el.appendChild(childEl);
  	}
  	el.setAttribute(kAttrFullScreen, "false");
  	}
  	},
  	defaultValue: (el: Element) => {
  	if (el.classList.contains(kValueboxClass) || hasFlowLayout(el)) {
  	return "false";
  	} else {
  	return dashboardMeta.expandable ? "true" : "false";
  	}
  	},
  	},
  	{

kValueboxClass is "valuebox", the class Quarto puts on its native value boxes. A bslib value box uses bslib-value-box instead, so the check misses and defaultValue does not treat it as a value box.

• quarto-cli/src/format/dashboard/format-dashboard-shared.ts

  Line 53 in 6ebb5db

  export const kValueboxClass = "valuebox";

dashboardMeta.expandable defaults to true (it is false only when the document sets expandable: false), so the handler injects the Expand button. This is why native value boxes, which own the valuebox class, are unaffected while bslib ones are not.

• quarto-cli/src/format/dashboard/format-dashboard-shared.ts

  Line 79 in 6ebb5db

  const expandable = dashboardRaw.expandable !== false;

[mcanouil]

Following on this, I've opened an issue on Quarto side as it's where the issue originates.

• Dashboard: bslib::value_box() ignores #| expandable: false and shows Expand button #14719

[etiennebacher]

Thank you! Using list() with #| content: valuebox (and renaming some of the parameters) works.