From e33674fb2e2a128e96b42eb02dedef2e834665be Mon Sep 17 00:00:00 2001
From: Mihai-Andrei Uscat <52234168+muscat1@users.noreply.github.com>
Date: Tue, 18 May 2021 09:04:42 +0300
Subject: [PATCH] fix(FocusLock): Stop stealing focus when embedded

---
 package.json                                  |  1 +
 .../base/util/react-focus-lock-wrapper.js     | 41 ++++++++-----------
 2 files changed, 19 insertions(+), 23 deletions(-)

diff --git a/package.json b/package.json
index 32b57908bf..c51716c83e 100644
--- a/package.json
+++ b/package.json
@@ -67,6 +67,7 @@
     "react": "16.12",
     "react-dom": "16.12",
     "react-emoji-render": "1.2.4",
+    "react-focus-lock": "2.5.1",
     "react-i18next": "10.11.4",
     "react-linkify": "1.0.0-alpha",
     "react-native": "github:jitsi/react-native#891986ec5ecaef65d1c8a7fe472f86cf84fe7551",
diff --git a/react/features/base/util/react-focus-lock-wrapper.js b/react/features/base/util/react-focus-lock-wrapper.js
index e00d605019..f55b6c18e7 100644
--- a/react/features/base/util/react-focus-lock-wrapper.js
+++ b/react/features/base/util/react-focus-lock-wrapper.js
@@ -6,31 +6,26 @@ import FocusLock, { MoveFocusInside } from 'react-focus-lock';
  * FocusLock wrapper that disable the FocusLock in the @atlaskit/modal-dialog. We need to disable it because if the
  * iframe API is used and a dialog is displayed it is impossible to click on fields outside of the iframe (FocusLock
  * will steal the focus from any element that is not part of the dialog).
+ *
+ * @param {Object} props - The props passed to the FocusLock.
+ * @returns {ReactElement}
  */
-export default class FocusLockWrapper extends FocusLock<*> {
-    /**
-     * Implements React's {@link Component#render()}.
-     *
-     * @inheritdoc
-     * @returns {ReactElement}
-     */
-    render() {
-        const { children, ...otherProps } = this.props;
+export default (props: Object) => {
+    const { children, ...otherProps } = props;
 
-        const props = {
-            ...otherProps,
-            crossFrame: false
-        };
+    const forwardProps = {
+        ...otherProps,
+        crossFrame: false
+    };
 
-        // MoveFocusInside is added in order to initially bring the focus on the dialog.
-        return (
-            <FocusLock
-                { ...props }
-                className = 'focus-lock'>
-                <MoveFocusInside>{children}</MoveFocusInside>
-            </FocusLock>
-        );
-    }
-}
+    // MoveFocusInside is added in order to initially bring the focus on the dialog.
+    return (
+        <FocusLock
+            { ...forwardProps }
+            className = 'focus-lock'>
+            <MoveFocusInside>{children}</MoveFocusInside>
+        </FocusLock>
+    );
+};
 
 export * from 'react-focus-lock';