fix: fix keyboard controls with carousel

marimo-team · Mar 9, 2024 · fd46ad6 · fd46ad6
1 parent 607b486
commit fd46ad6
Show file tree

Hide file tree

Showing 3 changed files with 26 additions and 2 deletions.
diff --git a/frontend/src/core/dom/UIElement.ts b/frontend/src/core/dom/UIElement.ts
@@ -7,6 +7,8 @@ import { defineCustomElement } from "./defineCustomElement";
 import { MarimoValueInputEventType, marimoValueInputEvent } from "./events";
 import { UI_ELEMENT_REGISTRY } from "./uiregistry";
 
+import "./ui-element.css";
+
 const UI_ELEMENT_TAG_NAME = "MARIMO-UI-ELEMENT";
 
 interface IUIElement extends HTMLElement {

diff --git a/frontend/src/core/dom/ui-element.css b/frontend/src/core/dom/ui-element.css
@@ -0,0 +1,8 @@
+/* Both the `marimo-ui-element` and its child should be displayed as if they were not wrapped in a custom element. */
+marimo-ui-element {
+  display: contents;
+
+  > * {
+    display: contents;
+  }
+}
diff --git a/frontend/src/plugins/layout/CarouselPlugin.tsx b/frontend/src/plugins/layout/CarouselPlugin.tsx
@@ -61,6 +61,11 @@ const CarouselComponent = ({
   const [isFullscreen, setIsFullscreen] = React.useState(false);
 
   useEventListener(document, "fullscreenchange", () => {
+    if (document.fullscreenElement) {
+      el.current?.swiper.keyboard.enable();
+    } else {
+      el.current?.swiper.keyboard.disable();
+    }
     setIsFullscreen(!!document.fullscreenElement);
   });
 
@@ -86,8 +91,8 @@ const CarouselComponent = ({
       // touch controls interfere with UI elements
       simulateTouch={false}
       keyboard={{
-        enabled: true,
-        onlyInViewport: true,
+        // Only enable keyboard controls when in fullscreen
+        enabled: isFullscreen,
       }}
       navigation={true}
       pagination={{
@@ -99,6 +104,15 @@ const CarouselComponent = ({
         return (
           <SwiperSlide key={index}>
             <div
+              onKeyDown={(e) => {
+                // If the target is from a marimo element, stop propagation
+                if (
+                  e.target instanceof HTMLElement &&
+                  e.target.tagName.toLocaleLowerCase().startsWith("marimo-")
+                ) {
+                  e.stopPropagation();
+                }
+              }}
               className={cn(
                 "h-full w-full flex items-center justify-center box-border overflow-hidden",
                 isFullscreen ? "p-20" : "p-6",