@marimo-team/frontend 0.23.1-dev2 → 0.23.1-dev3

package/src/utils/__tests__/events.test.ts

@@ -0,0 +1,223 @@
+/* Copyright 2026 Marimo. All rights reserved. */
+
+import { describe, expect, test } from "vitest";
+import { Events } from "../events";
+
+/**
+ * Create a minimal fake event with just a target (no composedPath).
+ * Simulates synthetic events from libraries like React Aria.
+ */
+function fakeEvent(target: EventTarget): Pick<Event, "target"> {
+  return { target };
+}
+
+/**
+ * Create a fake native-like KeyboardEvent with composedPath() returning
+ * a different element than target — the key scenario for shadow DOM
+ * retargeting where target is the shadow host but composedPath()[0]
+ * is the real focused element inside the shadow root.
+ */
+function fakeNativeEvent(
+  retargetedHost: EventTarget,
+  realTarget: EventTarget,
+): KeyboardEvent {
+  const event = new KeyboardEvent("keydown");
+  Object.defineProperty(event, "target", { value: retargetedHost });
+  Object.defineProperty(event, "composedPath", {
+    value: () => [realTarget, retargetedHost, document.body, document],
+  });
+  return event;
+}
+
+describe("Events.composedTarget", () => {
+  test("returns composedPath()[0] for native events", () => {
+    const input = document.createElement("input");
+    const host = document.createElement("div");
+    const event = fakeNativeEvent(host, input);
+
+    expect(Events.composedTarget(event)).toBe(input);
+  });
+
+  test("falls back to e.target when composedPath is absent", () => {
+    const div = document.createElement("div");
+    const event = fakeEvent(div);
+
+    expect(Events.composedTarget(event)).toBe(div);
+  });
+
+  test("falls back to e.target when composedPath returns empty array", () => {
+    const div = document.createElement("div");
+    const event = new KeyboardEvent("keydown");
+    Object.defineProperty(event, "target", { value: div });
+    Object.defineProperty(event, "composedPath", { value: () => [] });
+
+    expect(Events.composedTarget(event)).toBe(div);
+  });
+});
+
+describe("Events.shouldIgnoreKeyboardEvent", () => {
+  test("ignores events from <input>", () => {
+    const input = document.createElement("input");
+    const event = fakeNativeEvent(input, input);
+    expect(Events.shouldIgnoreKeyboardEvent(event)).toBe(true);
+  });
+
+  test("ignores events from <textarea>", () => {
+    const textarea = document.createElement("textarea");
+    const event = fakeNativeEvent(textarea, textarea);
+    expect(Events.shouldIgnoreKeyboardEvent(event)).toBe(true);
+  });
+
+  test("ignores events from <select>", () => {
+    const select = document.createElement("select");
+    const event = fakeNativeEvent(select, select);
+    expect(Events.shouldIgnoreKeyboardEvent(event)).toBe(true);
+  });
+
+  test("ignores events from <button>", () => {
+    const button = document.createElement("button");
+    const event = fakeNativeEvent(button, button);
+    expect(Events.shouldIgnoreKeyboardEvent(event)).toBe(true);
+  });
+
+  test("ignores events from contentEditable elements", () => {
+    const div = document.createElement("div");
+    div.setAttribute("contenteditable", "true");
+    document.body.append(div);
+
+    const event = fakeNativeEvent(div, div);
+    expect(Events.shouldIgnoreKeyboardEvent(event)).toBe(true);
+
+    div.remove();
+  });
+
+  test("ignores events from elements with role='textbox'", () => {
+    const container = document.createElement("div");
+    container.setAttribute("role", "textbox");
+    const child = document.createElement("span");
+    container.append(child);
+    document.body.append(container);
+
+    const event = fakeNativeEvent(child, child);
+    expect(Events.shouldIgnoreKeyboardEvent(event)).toBe(true);
+
+    container.remove();
+  });
+
+  test("ignores events from inside .cm-editor", () => {
+    const editor = document.createElement("div");
+    editor.className = "cm-editor";
+    const line = document.createElement("div");
+    editor.append(line);
+    document.body.append(editor);
+
+    const event = fakeNativeEvent(line, line);
+    expect(Events.shouldIgnoreKeyboardEvent(event)).toBe(true);
+
+    editor.remove();
+  });
+
+  test("does NOT ignore events from a plain <div>", () => {
+    const div = document.createElement("div");
+    const event = fakeNativeEvent(div, div);
+    expect(Events.shouldIgnoreKeyboardEvent(event)).toBe(false);
+  });
+
+  describe("shadow DOM retargeting (#4230)", () => {
+    test("ignores keydown when real target inside shadow root is <input>", () => {
+      const host = document.createElement("marimo-text");
+      const input = document.createElement("input");
+      // event.target is the shadow host, composedPath()[0] is the real input
+      const event = fakeNativeEvent(host, input);
+      expect(Events.shouldIgnoreKeyboardEvent(event)).toBe(true);
+    });
+
+    test("ignores keydown when real target inside shadow root is <textarea>", () => {
+      const host = document.createElement("marimo-text-area");
+      const textarea = document.createElement("textarea");
+      const event = fakeNativeEvent(host, textarea);
+      expect(Events.shouldIgnoreKeyboardEvent(event)).toBe(true);
+    });
+
+    test("ignores keydown when real target inside shadow root is <select>", () => {
+      const host = document.createElement("marimo-dropdown");
+      const select = document.createElement("select");
+      const event = fakeNativeEvent(host, select);
+      expect(Events.shouldIgnoreKeyboardEvent(event)).toBe(true);
+    });
+
+    test("does NOT ignore when shadow DOM real target is a plain <div>", () => {
+      const host = document.createElement("marimo-output");
+      const div = document.createElement("div");
+      const event = fakeNativeEvent(host, div);
+      expect(Events.shouldIgnoreKeyboardEvent(event)).toBe(false);
+    });
+  });
+
+  test("does NOT ignore events from non-marimo custom elements", () => {
+    const el = document.createElement("sl-input");
+    const event = fakeNativeEvent(el, el);
+    expect(Events.shouldIgnoreKeyboardEvent(event)).toBe(false);
+  });
+});
+
+describe("Events.fromInput", () => {
+  test("returns true for <input>", () => {
+    const input = document.createElement("input");
+    expect(Events.fromInput(fakeEvent(input))).toBe(true);
+  });
+
+  test("returns true for <textarea>", () => {
+    const textarea = document.createElement("textarea");
+    expect(Events.fromInput(fakeEvent(textarea))).toBe(true);
+  });
+
+  test("returns true for marimo custom elements", () => {
+    const el = document.createElement("marimo-slider");
+    expect(Events.fromInput(fakeEvent(el))).toBe(true);
+  });
+
+  // jsdom does not implement isContentEditable, so this is tested
+  // via shouldIgnoreKeyboardEvent which has a closest() fallback.
+  test.skip("returns true for contentEditable", () => {
+    const div = document.createElement("div");
+    div.setAttribute("contenteditable", "true");
+    document.body.append(div);
+
+    expect(Events.fromInput(fakeEvent(div))).toBe(true);
+
+    div.remove();
+  });
+
+  test("returns false for plain <div>", () => {
+    const div = document.createElement("div");
+    expect(Events.fromInput(fakeEvent(div))).toBe(false);
+  });
+
+  test("uses composedPath when available (shadow DOM)", () => {
+    const host = document.createElement("div");
+    const input = document.createElement("input");
+    const event = fakeNativeEvent(host, input);
+    expect(Events.fromInput(event)).toBe(true);
+  });
+});
+
+describe("Events.fromCodeMirror", () => {
+  test("returns true when target is inside .cm-editor", () => {
+    const editor = document.createElement("div");
+    editor.className = "cm-editor";
+    const line = document.createElement("div");
+    editor.append(line);
+    document.body.append(editor);
+
+    expect(Events.fromCodeMirror(line)).toBe(true);
+    editor.remove();
+  });
+
+  test("returns false when target is not inside .cm-editor", () => {
+    const div = document.createElement("div");
+    document.body.append(div);
+    expect(Events.fromCodeMirror(div)).toBe(false);
+    div.remove();
+  });
+});

package/src/utils/events.ts

@@ -37,21 +37,20 @@ export const Events = {
    * Returns true if the event is coming from a text input
    */
   fromInput: (e: Pick<KeyboardEvent, "target">) => {
-    const target = e.target as HTMLElement;
+    const target = Events.composedTarget(e);
     return (
       target.tagName === "INPUT" ||
       target.tagName === "TEXTAREA" ||
       target.tagName.startsWith("MARIMO") ||
       target.isContentEditable ||
-      Events.fromCodeMirror(e)
+      Events.fromCodeMirror(target)
     );
   },
 
   /**
    * Returns true if the event is coming from a code editor.
    */
-  fromCodeMirror: (e: Pick<KeyboardEvent, "target">) => {
-    const target = e.target as HTMLElement;
+  fromCodeMirror: (target: HTMLElement) => {
     return target.closest(".cm-editor") !== null;
   },
 
@@ -60,20 +59,35 @@ export const Events = {
    * form element or code editor.
    */
   shouldIgnoreKeyboardEvent(e: KeyboardEvent) {
-    // Check for common form elements where keyboard shortcuts should be ignored
+    const target = Events.composedTarget(e);
     return (
-      e.target instanceof HTMLInputElement ||
-      e.target instanceof HTMLTextAreaElement ||
-      e.target instanceof HTMLSelectElement ||
-      (e.target instanceof HTMLElement &&
-        (e.target.isContentEditable ||
-          e.target.tagName === "BUTTON" ||
-          e.target.closest("[role='textbox']") !== null ||
-          e.target.closest("[contenteditable='true']") !== null ||
-          e.target.closest(".cm-editor") !== null)) // Add check for CodeMirror editor
+      target instanceof HTMLInputElement ||
+      target instanceof HTMLTextAreaElement ||
+      target instanceof HTMLSelectElement ||
+      (target instanceof HTMLElement &&
+        (target.isContentEditable ||
+          target.tagName === "BUTTON" ||
+          target.closest("[role='textbox']") !== null ||
+          target.closest("[contenteditable='true']") !== null ||
+          Events.fromCodeMirror(target)))
     );
   },
 
+  /**
+   * Resolve the real event target, piercing shadow DOM retargeting.
+   * Falls back to e.target for synthetic events (e.g. React Aria)
+   * that don't expose composedPath.
+   *
+   * Without this, e.target is the shadow host (e.g. <marimo-text>) rather than the
+   * real <input> inside it, so instanceof checks fail. (#4230)
+   */
+  composedTarget(e: Pick<Event, "target">): HTMLElement {
+    if ("composedPath" in e && typeof e.composedPath === "function") {
+      return (e.composedPath()[0] ?? e.target) as HTMLElement;
+    }
+    return e.target as HTMLElement;
+  },
+
   hasModifier: (
     e: Pick<KeyboardEvent, "ctrlKey" | "metaKey" | "altKey" | "shiftKey">,
   ) => {

package/dist/assets/button-BKVLeSTX.js

@@ -1 +0,0 @@
-import{s as p}from"./chunk-LvLJmgfZ.js";import{t as T}from"./react-Bj1aDYRI.js";import{t as M}from"./compiler-runtime-B3qBwwSJ.js";import{h as N,n as K,t as C}from"./useEventListener-DGjKht0c.js";import{n as I,t as o}from"./cn-DYvqRARy.js";import{t as H}from"./jsx-runtime-Blw4afVn.js";const m={stopPropagation:e=>t=>{t.stopPropagation(),e&&e(t)},onEnter:e=>t=>{t.key==="Enter"&&e&&e(t)},preventFocus:e=>{e.preventDefault()},fromInput:e=>{let t=e.target;return t.tagName==="INPUT"||t.tagName==="TEXTAREA"||t.tagName.startsWith("MARIMO")||t.isContentEditable||m.fromCodeMirror(e)},fromCodeMirror:e=>e.target.closest(".cm-editor")!==null,shouldIgnoreKeyboardEvent(e){return e.target instanceof HTMLInputElement||e.target instanceof HTMLTextAreaElement||e.target instanceof HTMLSelectElement||e.target instanceof HTMLElement&&(e.target.isContentEditable||e.target.tagName==="BUTTON"||e.target.closest("[role='textbox']")!==null||e.target.closest("[contenteditable='true']")!==null||e.target.closest(".cm-editor")!==null)},hasModifier:e=>e.ctrlKey||e.metaKey||e.altKey||e.shiftKey,isMetaOrCtrl:e=>e.metaKey||e.ctrlKey};var S=M(),v=p(T(),1),z=p(H(),1),a="active:shadow-none",x=I(o("disabled:opacity-50 disabled:pointer-events-none","inline-flex items-center justify-center rounded-md text-sm font-medium focus-visible:outline-hidden focus-visible:ring-1 focus-visible:ring-ring focus-visible:ring-offset-2 ring-offset-background"),{variants:{variant:{default:o("bg-primary text-primary-foreground hover:bg-primary/90 shadow-xs border border-primary",a),destructive:o("border shadow-xs","bg-(--red-9) hover:bg-(--red-10) dark:bg-(--red-6) dark:hover:bg-(--red-7)","text-(--red-1) dark:text-(--red-12)","border-(--red-11)",a),success:o("border shadow-xs","bg-(--grass-9) hover:bg-(--grass-10) dark:bg-(--grass-6) dark:hover:bg-(--grass-7)","text-(--grass-1) dark:text-(--grass-12)","border-(--grass-11)",a),warn:o("border shadow-xs","bg-(--yellow-9) hover:bg-(--yellow-10) dark:bg-(--yellow-6) dark:hover:bg-(--yellow-7)","text-(--yellow-12)","border-(--yellow-11)",a),action:o("bg-action text-action-foreground shadow-xs","hover:bg-action-hover border border-action",a),outline:o("border border-slate-300 shadow-xs","hover:bg-accent hover:text-accent-foreground","hover:border-primary","aria-selected:text-accent-foreground aria-selected:border-primary",a),secondary:o("bg-secondary text-secondary-foreground hover:bg-secondary/80","border border-input shadow-xs",a),text:o("opacity-80 hover:opacity-100","active:opacity-100"),ghost:o("border border-transparent","hover:bg-accent hover:text-accent-foreground hover:shadow-xs",a,"active:text-accent-foreground"),link:"underline-offset-4 hover:underline text-link",linkDestructive:"underline-offset-4 hover:underline text-destructive underline-destructive",outlineDestructive:"border border-destructive text-destructive hover:bg-destructive/10"},size:{default:"h-10 py-2 px-4",xs:"h-7 px-2 rounded-md text-xs",sm:"h-9 px-3 rounded-md",lg:"h-11 px-8 rounded-md",icon:"h-6 w-6 mb-0"},disabled:{true:"opacity-50 pointer-events-none"}},defaultVariants:{variant:"default",size:"sm"}}),y=v.forwardRef((e,t)=>{let r=(0,S.c)(7),{className:f,variant:w,size:k,asChild:h,keyboardShortcut:n,...d}=e,E=h===void 0?!1:h,s=v.useRef(null),i;r[0]===Symbol.for("react.memo_cache_sentinel")?(i=()=>s.current,r[0]=i):i=r[0],v.useImperativeHandle(t,i);let l;r[1]===n?l=r[2]:(l=u=>{n&&(m.shouldIgnoreKeyboardEvent(u)||N(n)(u)&&(u.preventDefault(),u.stopPropagation(),s!=null&&s.current&&!s.current.disabled&&s.current.click()))},r[1]=n,r[2]=l),C(document,"keydown",l);let g=E?K:"button",b=o(x({variant:w,size:k,className:f,disabled:d.disabled}),f),c;return r[3]!==g||r[4]!==d||r[5]!==b?(c=(0,z.jsx)(g,{className:b,ref:s,...d}),r[3]=g,r[4]=d,r[5]=b,r[6]=c):c=r[6],c});y.displayName="Button";export{x as n,m as r,y as t};