From 00603748dc019de5890851af24ada88b0a5b670b Mon Sep 17 00:00:00 2001
From: GalvinGao <me@galvingao.com>
Date: Thu, 12 Oct 2023 14:06:23 -0400
Subject: [PATCH] feat: prevent enter

---
 src/components/rjsf/themes/BaseInputTemplate.tsx |  7 ++++++-
 src/pages/research/ResearchDetailPage.tsx        | 16 +++++++++++++++-
 2 files changed, 21 insertions(+), 2 deletions(-)

diff --git a/src/components/rjsf/themes/BaseInputTemplate.tsx b/src/components/rjsf/themes/BaseInputTemplate.tsx
index 078d9bd..34ecb0d 100644
--- a/src/components/rjsf/themes/BaseInputTemplate.tsx
+++ b/src/components/rjsf/themes/BaseInputTemplate.tsx
@@ -99,7 +99,12 @@ export default function BaseInputTemplate<
         onBlur={_onBlur}
         onFocus={_onFocus}
         onWheel={e => {
-          e.preventDefault()
+          const target = e.target as HTMLElement
+          // Prevent the input value change
+          target.blur()
+
+          // Prevent the page/container scrolling
+          e.stopPropagation()
         }}
         InputProps={{
           startAdornment: (
diff --git a/src/pages/research/ResearchDetailPage.tsx b/src/pages/research/ResearchDetailPage.tsx
index bd7a96c..19ab039 100644
--- a/src/pages/research/ResearchDetailPage.tsx
+++ b/src/pages/research/ResearchDetailPage.tsx
@@ -1,6 +1,6 @@
 import { Card, CardContent, CircularProgress, Toolbar } from "@mui/material"
 import RJSFForm, { IChangeEvent } from "@rjsf/core"
-import { FC, useRef } from "react"
+import { FC, useEffect, useRef } from "react"
 import { toast } from "react-hot-toast"
 import { graphql, useLazyLoadQuery, useMutation } from "react-relay"
 import { useParams } from "react-router-dom"
@@ -23,6 +23,20 @@ export const ResearchDetailPage: FC = () => {
   const { id } = useParams<{ id: string }>()
   if (!id) throw new Error("id is required")
 
+  useEffect(() => {
+    const el = formRef.current?.formElement?.current as HTMLDivElement
+    const handler = (e: KeyboardEvent) => {
+      if (e.key === "Enter") {
+        e.preventDefault()
+      }
+    }
+
+    el.addEventListener("keydown", handler, { passive: false, capture: true })
+    return () => {
+      el.removeEventListener("keydown", handler)
+    }
+  }, [formRef.current?.formElement])
+
   const data = useLazyLoadQuery<ResearchDetailPageQuery>(
     graphql`
       query ResearchDetailPageQuery($id: ID!) {