From 15c22d98c6d5e9094079beccfa24b27020137245 Mon Sep 17 00:00:00 2001
From: Gregory Schier <gschier1990@gmail.com>
Date: Sat, 1 Apr 2023 21:04:39 -0700
Subject: [PATCH] Fix dropdown and dialog key handling

---
 src-web/components/Sidebar.tsx       | 2 ++
 src-web/components/core/Dialog.tsx   | 6 ++++++
 src-web/components/core/Dropdown.tsx | 9 ++++++---
 3 files changed, 14 insertions(+), 3 deletions(-)

diff --git a/src-web/components/Sidebar.tsx b/src-web/components/Sidebar.tsx
index 61b62659..8e07b918 100644
--- a/src-web/components/Sidebar.tsx
+++ b/src-web/components/Sidebar.tsx
@@ -167,9 +167,11 @@ const _SidebarItem = forwardRef(function SidebarItem(
     async (e: KeyboardEvent<HTMLInputElement>) => {
       switch (e.key) {
         case 'Enter':
+          e.preventDefault();
           await handleSubmitNameEdit(e.currentTarget);
           break;
         case 'Escape':
+          e.preventDefault();
           setEditing(false);
           break;
       }
diff --git a/src-web/components/core/Dialog.tsx b/src-web/components/core/Dialog.tsx
index 4c2ece96..4922a145 100644
--- a/src-web/components/core/Dialog.tsx
+++ b/src-web/components/core/Dialog.tsx
@@ -2,6 +2,7 @@ import classnames from 'classnames';
 import { motion } from 'framer-motion';
 import type { ReactNode } from 'react';
 import { useMemo } from 'react';
+import { useKeyPressEvent } from 'react-use';
 import { Overlay } from '../Overlay';
 import { Heading } from './Heading';
 import { IconButton } from './IconButton';
@@ -33,6 +34,11 @@ export function Dialog({
     [description],
   );
 
+  useKeyPressEvent('Escape', (e) => {
+    e.preventDefault();
+    onClose();
+  });
+
   return (
     <Overlay open={open} onClose={onClose} portalName="dialog">
       <div className="absolute inset-0 flex items-center justify-center pointer-events-none">
diff --git a/src-web/components/core/Dropdown.tsx b/src-web/components/core/Dropdown.tsx
index bdf1a8d8..58d2bde3 100644
--- a/src-web/components/core/Dropdown.tsx
+++ b/src-web/components/core/Dropdown.tsx
@@ -94,11 +94,13 @@ function Menu({ className, items, onClose, triggerRect }: MenuProps) {
     setMenuStyles({ maxHeight: windowBox.height - menuBox.top - 5 });
   }, []);
 
-  useKeyPressEvent('Escape', () => {
+  useKeyPressEvent('Escape', (e) => {
+    e.preventDefault();
     onClose();
   });
 
-  useKeyPressEvent('ArrowUp', () => {
+  useKeyPressEvent('ArrowUp', (e) => {
+    e.preventDefault();
     setSelectedIndex((currIndex) => {
       let nextIndex = (currIndex ?? 0) - 1;
       const maxTries = items.length;
@@ -115,7 +117,8 @@ function Menu({ className, items, onClose, triggerRect }: MenuProps) {
     });
   });
 
-  useKeyPressEvent('ArrowDown', () => {
+  useKeyPressEvent('ArrowDown', (e) => {
+    e.preventDefault();
     setSelectedIndex((currIndex) => {
       let nextIndex = (currIndex ?? -1) + 1;
       const maxTries = items.length;