Fix perspective_viewer::restore calls blurring

texodus · texodus · commit 99be4e78e62b · 2025-06-09T22:19:19.000-04:00
Signed-off-by: Andrew Stein &lt;steinlink@gmail.com&gt;
diff --git a/rust/perspective-viewer/src/rust/custom_elements/viewer.rs b/rust/perspective-viewer/src/rust/custom_elements/viewer.rs
@@ -16,7 +16,6 @@ use std::cell::RefCell;
 use std::rc::Rc;
 use std::str::FromStr;
 
-use ::perspective_js::utils::global;
 use ::perspective_js::{Table, View};
 use futures::future::join;
 use js_sys::*;
@@ -399,7 +398,6 @@ impl PerspectiveViewerElement {
     /// ```
     pub fn restore(&self, update: JsValue) -> ApiFuture<()> {
         tracing::info!("Restoring ViewerConfig");
-        global::document().blur_active_element();
         let this = self.clone();
         ApiFuture::new(async move {
             let decoded_update = ViewerConfigUpdate::decode(&update)?;
@@ -790,7 +788,6 @@ impl PerspectiveViewerElement {
     /// ```
     #[wasm_bindgen]
     pub fn toggleConfig(&self, force: Option<bool>) -> ApiFuture<JsValue> {
-        global::document().blur_active_element();
         let root = self.root.clone();
         ApiFuture::new(async move {
             let force = force.map(SettingsUpdate::Update);
diff --git a/rust/perspective-viewer/src/rust/utils/browser/mod.rs b/rust/perspective-viewer/src/rust/utils/browser/mod.rs
@@ -12,7 +12,6 @@
 
 mod blob;
 mod download;
-mod focus;
 mod request_animation_frame;
 mod selection;
 
@@ -21,6 +20,5 @@ mod tests;
 
 pub use blob::*;
 pub use download::*;
-pub use focus::*;
 pub use request_animation_frame::*;
 pub use selection::*;
diff --git a/rust/perspective-viewer/test/html/superstore_with_input.html b/rust/perspective-viewer/test/html/superstore_with_input.html
@@ -0,0 +1,19 @@
+<!DOCTYPE html>
+<html>
+    <head>
+        <script type="module" src="/node_modules/@finos/perspective-viewer/dist/cdn/perspective-viewer.js"></script>
+        <script type="module" src="/node_modules/@finos/perspective-test/load-viewer-csv.js"></script>
+        <link rel="stylesheet" href="../css/demo.css" />
+        <link rel="stylesheet" href="/node_modules/@finos/perspective-viewer/dist/css/pro.css" />
+        <link rel="stylesheet" href="/node_modules/@fontsource/roboto-mono/400.css" />
+        <style>
+            perspective-viewer {
+                top: 50px !important;
+            }
+        </style>
+    </head>
+    <body>
+        <input />
+        <perspective-viewer></perspective-viewer>
+    </body>
+</html>
diff --git a/rust/perspective-viewer/test/js/focus.spec.js b/rust/perspective-viewer/test/js/focus.spec.js
@@ -10,19 +10,38 @@
 // ┃ of the [Apache License 2.0](https://www.apache.org/licenses/LICENSE-2.0). ┃
 // ┗━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┛
 
-use wasm_bindgen::JsCast;
-use web_sys::{Document, HtmlElement};
+import { test, expect } from "@finos/perspective-test";
 
-/// Blur the current active elemnt, triggering any blur handlers in the
-/// application (e.g. modals). This is often necessary when a DOM update will
-/// invalidate something that has a `"blur"` event handler.
-#[extend::ext]
-pub impl Document {
-    fn blur_active_element(&self) {
-        self.active_element()
-            .unwrap()
-            .unchecked_into::<HtmlElement>()
-            .blur()
-            .unwrap();
-    }
-}
+test.describe("browser focus", async () => {
+    test.beforeEach(async function init({ page }) {
+        await page.goto(
+            "/node_modules/@finos/perspective-viewer/test/html/superstore_with_input.html"
+        );
+
+        await page.evaluate(async () => {
+            while (!window["__TEST_PERSPECTIVE_READY__"]) {
+                await new Promise((x) => setTimeout(x, 10));
+            }
+        });
+
+        await page.evaluate(async () => {
+            await document.querySelector("perspective-viewer").restore({
+                plugin: "Debug",
+            });
+        });
+    });
+
+    test("Focus is not lost on external widgets when a restore call takes place", async ({
+        page,
+    }) => {
+        const viewer = page.locator("perspective-viewer");
+        const tagName = await viewer.evaluate(async (viewer) => {
+            const input = document.querySelector("input");
+            input.focus();
+            await viewer.restore({ group_by: ["State"] });
+            return document.activeElement.tagName;
+        });
+
+        expect(tagName).toEqual("INPUT");
+    });
+});
