diff --git a/ts/components/Lightbox.tsx b/ts/components/Lightbox.tsx index e58b1bb09c..6e54707af0 100644 --- a/ts/components/Lightbox.tsx +++ b/ts/components/Lightbox.tsx @@ -55,6 +55,16 @@ const IconButton = ({ onClick, type }: IconButtonProps) => ( ); export class Lightbox extends React.Component { + public componentDidMount() { + const useCapture = true; + document.addEventListener('keyup', this.onKeyUp, useCapture); + } + + public componentWillMount() { + const useCapture = true; + document.removeEventListener('keyup', this.onKeyUp, useCapture); + } + public render() { const { imageURL } = this.props; return ( @@ -69,4 +79,12 @@ export class Lightbox extends React.Component { ); } + + private onKeyUp = (event: KeyboardEvent) => { + if (event.key !== 'Escape') { + return; + } + + this.props.close(); + } }