From 57da95faf9014d36e60838fb0381b2bd811c2d33 Mon Sep 17 00:00:00 2001
From: Klink <85062+dogmar@users.noreply.github.com>
Date: Thu, 1 Feb 2024 14:36:08 -0800
Subject: [PATCH] fix: External elements shouldn't receive keypress events when
 Select is focused (#569)

---
 src/components/Select.tsx      |  7 ++++++-
 src/stories/Select.stories.tsx | 24 +++++++++++++++++++++++-
 2 files changed, 29 insertions(+), 2 deletions(-)

diff --git a/src/components/Select.tsx b/src/components/Select.tsx
index 95934f8b..65bf504b 100644
--- a/src/components/Select.tsx
+++ b/src/components/Select.tsx
@@ -345,7 +345,12 @@ function Select({
   })
 
   return (
-    <SelectInner className="selectInner">
+    <SelectInner
+      className="selectInner"
+      onKeyDown={(e) => {
+        e.stopPropagation()
+      }}
+    >
       <HiddenSelect
         state={state}
         triggerRef={ref}
diff --git a/src/stories/Select.stories.tsx b/src/stories/Select.stories.tsx
index 3836a014..18f1fc80 100644
--- a/src/stories/Select.stories.tsx
+++ b/src/stories/Select.stories.tsx
@@ -1,4 +1,10 @@
-import { type ComponentProps, type Key, forwardRef, useState } from 'react'
+import {
+  type ComponentProps,
+  type Key,
+  forwardRef,
+  useEffect,
+  useState,
+} from 'react'
 import styled, { useTheme } from 'styled-components'
 
 import {
@@ -202,8 +208,24 @@ const IconFrameTrigger = forwardRef((props: any, ref) => (
   />
 ))
 
+function useTestKeyCapture() {
+  useEffect(() => {
+    const handler = (e: KeyboardEvent) => {
+      if (e.target === document.body) return
+      alert(`Select box isn’t properly stopping keypress propagation`)
+    }
+
+    window.addEventListener('keydown', handler)
+
+    return () => window.removeEventListener('keydown', handler)
+  }, [])
+}
+
 function Template({ onFillLevel }: { onFillLevel: any }) {
   const theme = useTheme()
+
+  useTestKeyCapture()
+
   const [selectedKey, setSelectedKey] = useState<Key>()
   const shownStep = 4
   const [shownLimit, setShownLimit] = useState<number>(shownStep)