From 3879dad039b3ef40ab8aaa0f8ae758f46bfc1c0e Mon Sep 17 00:00:00 2001
From: ewwwwwwww <ew@cock.lu>
Date: Sun, 10 Jul 2022 04:42:22 -0700
Subject: [PATCH] scroll fix

---
 .../emoji/components/emoji_picker_dropdown.tsx       | 12 ++++++++++--
 1 file changed, 10 insertions(+), 2 deletions(-)

diff --git a/app/soapbox/features/emoji/components/emoji_picker_dropdown.tsx b/app/soapbox/features/emoji/components/emoji_picker_dropdown.tsx
index 31970bc43..9f21470ac 100644
--- a/app/soapbox/features/emoji/components/emoji_picker_dropdown.tsx
+++ b/app/soapbox/features/emoji/components/emoji_picker_dropdown.tsx
@@ -110,7 +110,8 @@ const EmojiPickerDropdown: React.FC<IEmojiPickerDropdown> = ({ custom_emojis, fr
     placement: isMobile(window.innerWidth) ? 'auto' : placement,
   });
 
-  const handleToggle = () => {
+  const handleToggle = (e: Event) => {
+    e.stopPropagation();
     setVisible(!visible);
   };
 
@@ -185,6 +186,13 @@ const EmojiPickerDropdown: React.FC<IEmojiPickerDropdown> = ({ custom_emojis, fr
   });
 
   useEffect(() => {
+    // fix scrolling focus issue
+    if (visible) {
+      document.body.style.overflow = "hidden";
+    } else {
+      document.body.style.overflow = "initial";
+    }
+
     if (!EmojiPicker) {
       setLoading(true);
 
@@ -199,7 +207,7 @@ const EmojiPickerDropdown: React.FC<IEmojiPickerDropdown> = ({ custom_emojis, fr
   }, [visible]);
 
   // TODO: move to class
-  const style = !isMobile(window.innerWidth) ? styles.popper : {
+  const style: React.CSSProperties = !isMobile(window.innerWidth) ? styles.popper : {
     ...styles.popper, width: '100%',
   };