From 5245f1df0c5fa9f2c224238afec6caa463f58941 Mon Sep 17 00:00:00 2001
From: Victor Lantigua <lantiguav@gmail.com>
Date: Sat, 24 Aug 2024 15:33:47 -0400
Subject: [PATCH 1/2] fix: disabling focus event for read only fields

---
 src/components/InteractiveArea.tsx | 10 +++++++++-
 1 file changed, 9 insertions(+), 1 deletion(-)

diff --git a/src/components/InteractiveArea.tsx b/src/components/InteractiveArea.tsx
index b609e2cf..60807efd 100644
--- a/src/components/InteractiveArea.tsx
+++ b/src/components/InteractiveArea.tsx
@@ -144,6 +144,14 @@ const InteractiveArea = ({ isShow, setIsOpenModal }: Props) => {
     applyRegex(e.target.value, flags);
   };
 
+  const onFocus = e => {
+    if (data.readOnly) {
+        return;
+    }
+
+    onChange(e);
+  }
+
   const focusInput = () => {
     regexInput?.current?.focus();
   };
@@ -254,7 +262,7 @@ const InteractiveArea = ({ isShow, setIsOpenModal }: Props) => {
             readOnly={data.readOnly}
             value={data.visibleRegex || regex}
             onChange={onChange}
-            onFocus={onChange}
+            onFocus={onFocus}
             placeholder={placeholder}
             spellCheck={false}
           />

From 6b2b63b9e7f8d26666d548fce77f9add4ee07591 Mon Sep 17 00:00:00 2001
From: Victor Lantigua <lantiguav@gmail.com>
Date: Tue, 27 Aug 2024 12:14:02 -0400
Subject: [PATCH 2/2] fix: remove scroll limitation

---
 src/components/PlaygroundSidebar.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/PlaygroundSidebar.tsx b/src/components/PlaygroundSidebar.tsx
index 2de68126..6302ed3e 100644
--- a/src/components/PlaygroundSidebar.tsx
+++ b/src/components/PlaygroundSidebar.tsx
@@ -8,7 +8,7 @@ const PlaygroundSidebar = () => {
   const { formatMessage } = useIntl();
 
   return (
-    <div className="overflow-y-scroll lg:overflow-y-hidden p-3 space-y-8 flex-col lg:hover:overflow-y-scroll rounded-md">
+    <div className="overflow-y-scroll p-3 space-y-8 flex-col rounded-md">
       {data.map(row => (
         <div key={row.title} className="bg-neutral-800 rounded-md">
           <div className="mb-3">{formatMessage({ id: row.title })}</div>