From 3c1f056d2aad501fb852c8c83c51a65140c9f46e Mon Sep 17 00:00:00 2001
From: Hristo Terezov <hristo@jitsi.org>
Date: Thu, 15 Aug 2019 16:49:40 +0100
Subject: [PATCH] fix(dialog): Don't steal focus

---
 .../base/util/react-focus-lock-wrapper.js     | 30 +++++++++++++++++++
 webpack.config.js                             | 14 +++++++++
 2 files changed, 44 insertions(+)
 create mode 100644 react/features/base/util/react-focus-lock-wrapper.js

diff --git a/react/features/base/util/react-focus-lock-wrapper.js b/react/features/base/util/react-focus-lock-wrapper.js
new file mode 100644
index 000000000..20c71532d
--- /dev/null
+++ b/react/features/base/util/react-focus-lock-wrapper.js
@@ -0,0 +1,30 @@
+// @flow
+import React from 'react';
+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 imposible to click on fields outside of the iframe (FocusLock
+ * will steal the focus from any element that is not part of the dialog).
+ */
+export default class FocusLockWrapper extends FocusLock<*> {
+    /**
+     * Implements React's {@link Component#render()}.
+     *
+     * @inheritdoc
+     * @returns {ReactElement}
+     */
+    render() {
+        const { children, ...otherProps } = this.props;
+
+        const props = {
+            ...otherProps,
+            disabled: true
+        };
+
+        // MoveFocusInside is added in order to initially bring the focus on the dialog.
+        return <FocusLock { ...props } ><MoveFocusInside>{children}</MoveFocusInside></FocusLock>;
+    }
+}
+
+export * from 'react-focus-lock';
diff --git a/webpack.config.js b/webpack.config.js
index ec54fd4d6..a29f005c9 100644
--- a/webpack.config.js
+++ b/webpack.config.js
@@ -91,6 +91,20 @@ const config = {
                 'style-loader',
                 'css-loader'
             ]
+        }, {
+            test: /\/node_modules\/@atlaskit\/modal-dialog\/.*\.js$/,
+            resolve: {
+                alias: {
+                    'react-focus-lock': `${__dirname}/react/features/base/util/react-focus-lock-wrapper.js`
+                }
+            }
+        }, {
+            test: /\/react\/features\/base\/util\/react-focus-lock-wrapper.js$/,
+            resolve: {
+                alias: {
+                    'react-focus-lock': `${__dirname}/node_modules/react-focus-lock`
+                }
+            }
         } ]
     },
     node: {