fix(dialog): Don't steal focus

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

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: {