jiti-meet/react/features/base/util/react-focus-lock-wrapper.js

37 lines
1.1 KiB
JavaScript
Raw Normal View History

2019-08-15 15:49:40 +00:00
// @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 impossible to click on fields outside of the iframe (FocusLock
2019-08-15 15:49:40 +00:00
* 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,
2021-01-14 16:12:08 +00:00
crossFrame: false
2019-08-15 15:49:40 +00:00
};
// MoveFocusInside is added in order to initially bring the focus on the dialog.
2021-01-14 16:12:08 +00:00
return (
<FocusLock
{ ...props }
className = 'focus-lock'>
<MoveFocusInside>{children}</MoveFocusInside>
</FocusLock>
);
2019-08-15 15:49:40 +00:00
}
}
export * from 'react-focus-lock';