More update_popover() fixes

R/popover.R

@@ -13,7 +13,8 @@
 #'   object in a [div()] or [span()].
 #' @param ... UI elements for the popover's body. Character strings are
 #'   [automatically escaped][htmlEscape()] unless marked as [HTML()].
-#' @param title A title (header) for the popover.
+#' @param title A title (header) for the popover. To remove a header
+#'   with `update_popover()`, provide a either an empty string or `character(0)`.
 #' @param id A character string. Required to re-actively respond to the
 #'   visibility of the popover (via the `input[[id]]` value) and/or update the
 #'   visibility/contents of the popover.
@@ -183,7 +184,7 @@ update_popover <- function(id, ..., title = NULL, session = get_current_session(
   msg <- dropNulls(list(
     method = "update",
     content = if (length(body) > 0) processDeps(body, session),
-    header = if (length(title) > 0) processDeps(title, session)
+    header = if (!is.null(title)) processDeps(title, session)
   ))
 
   force(id)

srcts/src/components/webcomponents/popover.ts

@@ -349,43 +349,53 @@ export class BslibPopover extends BslibElement {
   private _updatePopover(data: UpdateMessage): void {
     const { content, header } = data;
 
+    // First, render any HTMLDependency()s
     const deps = [];
     if (content) deps.push(...content.deps);
     if (header) deps.push(...header.deps);
     Shiny.renderDependencies(deps);
 
-    // Since we may need to add a close button (with event handlers),
-    // parse the string into an HTMLElement. And, since .setContent() is less
-    // error-prone if we pass _both_ the header and content, we fallback to the
-    // existing header/content if the user didn't supply one.
-    const getOrCreateElement = (
-      x: typeof content | typeof header,
-      fallback: HTMLElement | undefined,
-      selector: string
-    ): HTMLElement => {
-      if (x) return createWrapperElement(x.html, "contents");
-      if (fallback) return fallback;
-      return this.bsPopover.tip?.querySelector(selector) as HTMLElement;
-    };
+    const { tip } = this.bsPopover;
 
-    const newHeader = getOrCreateElement(
-      header,
-      this.header,
-      ".popover-header"
-    );
-    const newContent = getOrCreateElement(
-      content,
-      this.content,
-      ".popover-body"
-    );
-    render(this._closeButton(newHeader), newContent);
+    // If the user hasn't supplied new content/header, we still need to find and pass
+    // along the current content/header (so they don't get removed on update).
+    // These current elements should always be a <div style="display:contents">
+    // with the actual content inside.
+    const currentHeader = this.visible
+      ? (tip?.querySelector(".popover-header")?.children[0] as HTMLElement)
+      : (this.header as HTMLElement);
+
+    const currentContent = this.visible
+      ? (tip?.querySelector(".popover-body")?.children[0] as HTMLElement)
+      : (this.content as HTMLElement);
+
+    // If user does supply new content/header, then we wrap it in a
+    // <div style="display:contents"> so that the markup structure mirrors
+    // what bslib::popover() uses for markup
+    const newHeader = header
+      ? createWrapperElement(header.html, "contents")
+      : currentHeader;
+
+    const newContent = content
+      ? createWrapperElement(content.html, "contents")
+      : currentContent;
+
+    // If user has supplied new content, then add the close button
+    // (if not, it's already there since we added it in connectedCallback)
+    if (content) {
+      render(this._closeButton(newHeader), newContent);
+    }
+
+    // Only render a header if the newHeader has actual contents
+    // (i.e., if header.html is an empty string, then we don't render it)
+    const actualHeader = hasHeader(newHeader) ? newHeader : "";
 
     setContentCarefully({
       instance: this.bsPopover,
       trigger: this.triggerElement,
       content: {
         // eslint-disable-next-line @typescript-eslint/naming-convention
-        ".popover-header": hasHeader(newHeader) ? newHeader : "",
+        ".popover-header": actualHeader,
         // eslint-disable-next-line @typescript-eslint/naming-convention
         ".popover-body": newContent,
       },