From b129b526f305c6e7d2299d9f222dd2b8ee0e97e7 Mon Sep 17 00:00:00 2001
From: sylenien <nikita@openreplay.com>
Date: Thu, 3 Nov 2022 11:15:22 +0100
Subject: [PATCH] change(ui): prevent player playing during editing of fields

---
 frontend/app/components/Session/Layout/Player/Controls.js   | 6 +++---
 .../components/Session_/Player/Overlay/PlayIconLayer.tsx    | 2 +-
 frontend/app/components/ui/Checkbox/Checkbox.tsx            | 2 +-
 3 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/frontend/app/components/Session/Layout/Player/Controls.js b/frontend/app/components/Session/Layout/Player/Controls.js
index aafce5062..69af9a111 100644
--- a/frontend/app/components/Session/Layout/Player/Controls.js
+++ b/frontend/app/components/Session/Layout/Player/Controls.js
@@ -89,7 +89,7 @@ function Controls({
               icon="replay-10"
             />
           </div>
-          <div className="flex items-center"> 
+          <div className="flex items-center">
             <button
               className={ cn("text-gray-darkest hover:bg-gray-lightest", cls.speedButton) }
               onClick={ player.toggleSpeed }
@@ -119,7 +119,7 @@ function Controls({
                 hasErrors={ hasErrors }
               />
             )}
-            
+
             <ControlButton
               disabled={ disabled }
               onClick={ player.toggleFullscreen }
@@ -134,4 +134,4 @@ function Controls({
   );
 }
 
-export default observer(Controls);
\ No newline at end of file
+export default observer(Controls);
diff --git a/frontend/app/components/Session_/Player/Overlay/PlayIconLayer.tsx b/frontend/app/components/Session_/Player/Overlay/PlayIconLayer.tsx
index 587a14239..71ef1a76b 100644
--- a/frontend/app/components/Session_/Player/Overlay/PlayIconLayer.tsx
+++ b/frontend/app/components/Session_/Player/Overlay/PlayIconLayer.tsx
@@ -26,7 +26,7 @@ function PlayIconLayer({ playing, togglePlay, notesEdit }: Props) {
   const getIsEdit = React.useCallback(() => notesEdit, [notesEdit])
 
   const onKeyDown = (e: any) => {
-    if (getIsEdit()) return;
+    if (getIsEdit() || e.target instanceof HTMLInputElement || e.target instanceof HTMLTextAreaElement) return;
     if (e.key === ' ') {
       togglePlayAnimated();
     }
diff --git a/frontend/app/components/ui/Checkbox/Checkbox.tsx b/frontend/app/components/ui/Checkbox/Checkbox.tsx
index e4c91d726..666982b38 100644
--- a/frontend/app/components/ui/Checkbox/Checkbox.tsx
+++ b/frontend/app/components/ui/Checkbox/Checkbox.tsx
@@ -10,7 +10,7 @@ export default (props: Props) => {
     const { className = '', label = '', ...rest } = props;
     return (
         <label className={cn('flex items-center cursor-pointer', className)}>
-            <input type="checkbox"  onChange={() => null} {...rest} />
+            <input type="checkbox" onChange={() => null} {...rest} />
             {label && <span className="ml-2 select-none mb-0">{label}</span>}
         </label>
     );