From 21f45c85d9da851c5909ffd96d35945f73276b5c Mon Sep 17 00:00:00 2001 From: "Grot (@grafanabot)" <43478413+grafanabot@users.noreply.github.com> Date: Fri, 26 May 2023 08:28:15 +0100 Subject: [PATCH] [v10.0.x] Drawer: Fixes closeOnMaskClick false issue (#69103) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Drawer: Fixes closeOnMaskClick false issue (#69083) (cherry picked from commit 1eed40fcf698bc5af7a00958c21b830656bcf624) Co-authored-by: Torkel Ödegaard --- packages/grafana-ui/src/components/Drawer/Drawer.tsx | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) diff --git a/packages/grafana-ui/src/components/Drawer/Drawer.tsx b/packages/grafana-ui/src/components/Drawer/Drawer.tsx index 80fea394303..90a584e8702 100644 --- a/packages/grafana-ui/src/components/Drawer/Drawer.tsx +++ b/packages/grafana-ui/src/components/Drawer/Drawer.tsx @@ -73,7 +73,8 @@ export function Drawer({ // Adds body class while open so the toolbar nav can hide some actions while drawer is open useBodyClassWhileOpen(); - useClickAway(overlayRef, onClose); + // Close when we click outside mask (topnav) but only if closeOnMaskClick is true + useClickAway(overlayRef, closeOnMaskClick ? onClose : doNothing); // Apply size styles (unless deprecated width prop is used) const rootClass = cx(styles.drawer, !width && styles.sizes[size]); @@ -142,6 +143,8 @@ export function Drawer({ ); } +function doNothing() {} + function useBodyClassWhileOpen() { useEffect(() => { if (!document.body) {