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

---
 frontend/src/plugins/layout/CarouselPlugin.tsx | 18 ++++++++++++++++--
 1 file changed, 16 insertions(+), 2 deletions(-)

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",