Fix perspective-config-update to fire on config change

Signed-off-by: Andrew Stein <steinlink@gmail.com>

Author: texodus

rust/perspective-viewer/src/rust/components/status_bar.rs

@@ -196,8 +196,8 @@ impl Component for StatusBar {
             },
         };
 
-        let oninput = ctx.link().callback({
-            move |input: InputEvent| {
+        let onchange = ctx.link().callback({
+            move |input: Event| {
                 let title = input
                     .target()
                     .unwrap()
@@ -239,7 +239,7 @@ impl Component for StatusBar {
                                 placeholder=" "
                                 value={ctx.props().presentation.get_title()}
                                 size="10"
-                                {oninput}
+                                {onchange}
                             />
                             <span id="status-bar-placeholder" />
                         </label>

rust/perspective-viewer/src/rust/custom_events.rs

@@ -34,7 +34,7 @@ use crate::*;
 /// on `CustomElements`, but when it is `drop()` the Custom Element will no
 /// longer dispatch events such as `"perspective-config-change"`.
 #[derive(Clone)]
-pub struct CustomEvents(Rc<(CustomEventsDataRc, [Subscription; 5])>);
+pub struct CustomEvents(Rc<(CustomEventsDataRc, [Subscription; 6])>);
 
 impl ImplicitClone for CustomEvents {}
 impl PartialEq for CustomEvents {
@@ -113,12 +113,18 @@ impl CustomEvents {
             move |_| data.clone().dispatch_config_update()
         });
 
+        let title_sub = presentation.title_changed.add_listener({
+            clone!(data);
+            move |_| data.clone().dispatch_config_update()
+        });
+
         Self(Rc::new((data, [
             theme_sub,
             settings_sub,
             column_settings_sub,
             plugin_sub,
             view_sub,
+            title_sub,
         ])))
     }
 

rust/perspective-viewer/test/js/events.spec.ts

@@ -10,7 +10,7 @@
 // ┃ of the [Apache License 2.0](https://www.apache.org/licenses/LICENSE-2.0). ┃
 // ┗━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┛
 
-import { test, expect } from "@finos/perspective-test";
+import { test, expect, shadow_type } from "@finos/perspective-test";
 import {
     compareContentsToSnapshot,
     API_VERSION,
@@ -93,6 +93,45 @@ test.describe("Events", () => {
         ]);
     });
 
+    test("Editing the title fires the 'perspective-config-update' event", async ({
+        page,
+    }) => {
+        await page.evaluate(async () => {
+            const viewer = document.querySelector("perspective-viewer");
+            window["acc"] = [];
+
+            await viewer!.restore({
+                settings: true,
+            });
+
+            viewer!.addEventListener("perspective-config-update", (event) => {
+                window["acc"].push(event.detail);
+            });
+        });
+
+        await shadow_type(
+            page,
+            "New Title",
+            true,
+            "perspective-viewer",
+            "#status_bar",
+            "input"
+        );
+
+        const result = await page.evaluate(async () => {
+            return window["acc"];
+        });
+
+        expect(result.map((x) => x.title)).toEqual(["New Title"]);
+
+        const config = await page.evaluate(async () => {
+            const viewer = document.querySelector("perspective-viewer");
+            return await viewer?.save();
+        });
+
+        expect(config.title).toEqual("New Title");
+    });
+
     // NOTE: Previously skipped, kept for future reference
     // test.skip("restore with a 'plugin' field fires the 'perspective-plugin-update' event", async ({
     //     page,

tools/perspective-test/src/js/utils.ts

@@ -296,6 +296,17 @@ export async function shadow_type(
 
                 triggerInputEvent(elem);
             }
+
+            if (is_incremental) {
+                if (elem instanceof HTMLElement) {
+                    const event = new Event("change", {
+                        bubbles: true,
+                        cancelable: true,
+                    });
+
+                    elem.dispatchEvent(event);
+                }
+            }
         },
         { content, path, is_incremental }
     );