Fix close button not working on highlight

docs/src/content/guides/changelog.mdx

@@ -48,6 +48,12 @@ heading.
   longer get clipped.
   ([#454](https://github.com/nilbuild/driver.js/issues/454),
   [#563](https://github.com/nilbuild/driver.js/issues/563))
+- `removeChild` DOMException when re-rendering a popover whose wrapper was
+  already detached from the DOM.
+  ([#572](https://github.com/nilbuild/driver.js/issues/572))
+- Close button on a single-element `highlight()` popover did nothing when
+  clicked. It now closes the popover by default, respecting `allowClose` and any
+  custom `onCloseClick`. ([#444](https://github.com/nilbuild/driver.js/issues/444))
 
 ## 1.5.0
 

src/driver.ts

@@ -232,6 +232,7 @@ export function driver(options: Config = {}): Driver {
 
     listen("overlayClick", handleOverlayClick);
     listen("escapePress", handleClose);
+    listen("closeClick", handleClose);
     listen("arrowLeftPress", handleArrowLeft);
     listen("arrowRightPress", handleArrowRight);
   }

src/popover.ts

@@ -64,7 +64,7 @@ export function renderPopover(element: Element, step: DriveStep) {
   let popover = getState("popover");
   if (popover) {
     destroyDriverClick(popover.wrapper);
-    document.body.removeChild(popover.wrapper);
+    popover.wrapper.remove();
   }
 
   popover = createPopover();

tests/highlight.test.ts

@@ -127,6 +127,48 @@ describe("disableActiveInteraction", () => {
   });
 });
 
+describe("single element highlight close button", () => {
+  it("closes the popover when the close button is clicked", () => {
+    const d = createDriver({ animate: false, allowClose: true });
+    d.highlight({
+      element: "#intro",
+      popover: { title: "Highlighted", showButtons: ["close"] },
+    });
+
+    expect(d.isActive()).toBe(true);
+
+    navButton("close")?.click();
+
+    expect(d.isActive()).toBe(false);
+  });
+
+  it("runs a custom onCloseClick instead of closing when provided", () => {
+    const onCloseClick = vi.fn();
+    const d = createDriver({ animate: false, allowClose: true });
+    d.highlight({
+      element: "#intro",
+      popover: { title: "Highlighted", showButtons: ["close"], onCloseClick },
+    });
+
+    navButton("close")?.click();
+
+    expect(onCloseClick).toHaveBeenCalledTimes(1);
+    expect(d.isActive()).toBe(true);
+  });
+
+  it("keeps the popover open on close click when allowClose is false", () => {
+    const d = createDriver({ animate: false, allowClose: false });
+    d.highlight({
+      element: "#intro",
+      popover: { title: "Highlighted", showButtons: ["close"] },
+    });
+
+    navButton("close")?.click();
+
+    expect(d.isActive()).toBe(true);
+  });
+});
+
 describe("step data", () => {
   it("exposes a step's data via getActiveStep", () => {
     const d = createDriver({