From fd46ad6d151567953d5351c450c3b2ba91ae8520 Mon Sep 17 00:00:00 2001
From: Myles Scolnick <myles@marimo.io>
Date: Fri, 8 Mar 2024 17:17:09 -0700
Subject: [PATCH] fix: fix keyboard controls with carousel

---
 frontend/src/core/dom/UIElement.ts             |  2 ++
 frontend/src/core/dom/ui-element.css           |  8 ++++++++
 frontend/src/plugins/layout/CarouselPlugin.tsx | 18 ++++++++++++++++--
 3 files changed, 26 insertions(+), 2 deletions(-)
 create mode 100644 frontend/src/core/dom/ui-element.css

diff --git a/frontend/src/core/dom/UIElement.ts b/frontend/src/core/dom/UIElement.ts
index 4b67bf37836..0ee2a27d483 100644
--- 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
new file mode 100644
index 00000000000..9f5171cd0a0
--- /dev/null
+++ 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
index 6a6d17d0230..93aa0b650f2 100644
--- 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",