From a17c805f50600648bb21f7bb0a803583b02918e0 Mon Sep 17 00:00:00 2001 From: Nathan Vasse Date: Wed, 21 Feb 2024 15:42:36 +0100 Subject: [PATCH] =?UTF-8?q?=F0=9F=90=9B(react)=20fix=20closeOnClickOutside?= =?UTF-8?q?=20not=20working?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Our recent changes to enable the customization of the modal backdrop caused this prop to not work anymore. --- packages/react/src/components/Modal/index.scss | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) diff --git a/packages/react/src/components/Modal/index.scss b/packages/react/src/components/Modal/index.scss index d7e3183..979e9ad 100644 --- a/packages/react/src/components/Modal/index.scss +++ b/packages/react/src/components/Modal/index.scss @@ -13,7 +13,10 @@ // ::backdrop does not inherit from its element so CSS vars does not work. // ( https://stackoverflow.com/a/77393321 ) // So for now, we hide the backdrop element and use a dom element to create the backdrop. - visibility: hidden; + // We cannot use visibility: hidden because the component will not be able to receive click events for the + // closeOnClickOutside prop. The backdrop is the only element able to capture click as the dialog is displayed in + // the Top-Layer. + background: transparent; } &__backdrop {