37 lines
1.1 KiB
JavaScript
37 lines
1.1 KiB
JavaScript
// @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
|
|
* 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,
|
|
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>
|
|
);
|
|
}
|
|
}
|
|
|
|
export * from 'react-focus-lock';
|