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 (
-
- {children}
-
- );
- }
-}
+ // MoveFocusInside is added in order to initially bring the focus on the dialog.
+ return (
+
+ {children}
+
+ );
+};
export * from 'react-focus-lock';