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

32 lines
986 B
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).
*
* @param {Object} props - The props passed to the FocusLock.
* @returns {ReactElement}
2019-08-15 15:49:40 +00:00
*/
export default (props: Object) => {
const { children, ...otherProps } = props;
2019-08-15 15:49:40 +00:00
const forwardProps = {
...otherProps,
crossFrame: false
};
2019-08-15 15:49:40 +00:00
// MoveFocusInside is added in order to initially bring the focus on the dialog.
return (
<FocusLock
{ ...forwardProps }
className = 'focus-lock'>
<MoveFocusInside>{children}</MoveFocusInside>
</FocusLock>
);
};
2019-08-15 15:49:40 +00:00
export * from 'react-focus-lock';