fix(FocusLock): Stop stealing focus when embedded
This commit is contained in:
parent
3f7073c589
commit
e33674fb2e
|
@ -67,6 +67,7 @@
|
||||||
"react": "16.12",
|
"react": "16.12",
|
||||||
"react-dom": "16.12",
|
"react-dom": "16.12",
|
||||||
"react-emoji-render": "1.2.4",
|
"react-emoji-render": "1.2.4",
|
||||||
|
"react-focus-lock": "2.5.1",
|
||||||
"react-i18next": "10.11.4",
|
"react-i18next": "10.11.4",
|
||||||
"react-linkify": "1.0.0-alpha",
|
"react-linkify": "1.0.0-alpha",
|
||||||
"react-native": "github:jitsi/react-native#891986ec5ecaef65d1c8a7fe472f86cf84fe7551",
|
"react-native": "github:jitsi/react-native#891986ec5ecaef65d1c8a7fe472f86cf84fe7551",
|
||||||
|
|
|
@ -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
|
* 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
|
* 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).
|
* 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<*> {
|
export default (props: Object) => {
|
||||||
/**
|
const { children, ...otherProps } = props;
|
||||||
* Implements React's {@link Component#render()}.
|
|
||||||
*
|
|
||||||
* @inheritdoc
|
|
||||||
* @returns {ReactElement}
|
|
||||||
*/
|
|
||||||
render() {
|
|
||||||
const { children, ...otherProps } = this.props;
|
|
||||||
|
|
||||||
const props = {
|
const forwardProps = {
|
||||||
...otherProps,
|
...otherProps,
|
||||||
crossFrame: false
|
crossFrame: false
|
||||||
};
|
};
|
||||||
|
|
||||||
// MoveFocusInside is added in order to initially bring the focus on the dialog.
|
// MoveFocusInside is added in order to initially bring the focus on the dialog.
|
||||||
return (
|
return (
|
||||||
<FocusLock
|
<FocusLock
|
||||||
{ ...props }
|
{ ...forwardProps }
|
||||||
className = 'focus-lock'>
|
className = 'focus-lock'>
|
||||||
<MoveFocusInside>{children}</MoveFocusInside>
|
<MoveFocusInside>{children}</MoveFocusInside>
|
||||||
</FocusLock>
|
</FocusLock>
|
||||||
);
|
);
|
||||||
}
|
};
|
||||||
}
|
|
||||||
|
|
||||||
export * from 'react-focus-lock';
|
export * from 'react-focus-lock';
|
||||||
|
|
Loading…
Reference in New Issue