From d9a05c017a79e9a75c4a563bb6ead578478a4116 Mon Sep 17 00:00:00 2001 From: Maxime Lalo Date: Wed, 10 May 2023 15:27:26 +0200 Subject: [PATCH] :sparkles: Improving modal close with escape and backspace --- .../Components/DesignSystem/Modal/index.tsx | 19 +++++++++++++++++++ 1 file changed, 19 insertions(+) diff --git a/src/front/Components/DesignSystem/Modal/index.tsx b/src/front/Components/DesignSystem/Modal/index.tsx index a1bca8ef..3a9624e2 100644 --- a/src/front/Components/DesignSystem/Modal/index.tsx +++ b/src/front/Components/DesignSystem/Modal/index.tsx @@ -79,16 +79,35 @@ export default class Modal extends React.Component { willClose: false, }); }, this.props.animationDelay); + document.body.style.overflow = "auto"; } if (prevProps.isOpen !== this.props.isOpen && this.props.isOpen) { this.setState({ isOpen: true }); + document.body.style.overflow = "hidden"; } this.rootRefElement.current?.style.setProperty("--animation-delay", this.props.animationDelay!.toString().concat("ms")); } + public override componentDidMount(): void { + document.addEventListener("keydown", this.handleKeyDown); + } + + public override componentWillUnmount(): void { + document.body.style.overflow = "auto"; + document.removeEventListener("keydown", this.handleKeyDown); + } + protected close() { if (this.props.hasContainerClosable === false) return; if (this.state.willClose) return; this.props.onClose(); } + + + + private handleKeyDown = (e: KeyboardEvent): void => { + if (e.key === "Escape" || e.key === "Esc" || e.key === "Backspace") { + this.props.onClose(); + } + } }