fix(FocusLock): Stop stealing focus when embedded

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",

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';