From 532f21f97a156b4fd851faffabef73af75c9f3c1 Mon Sep 17 00:00:00 2001 From: sarah Date: Tue, 29 Oct 2024 12:16:47 +0500 Subject: [PATCH] fix(rac): Aria Modal issues when it is dismissible Change-Id: Ia55a1e0b59ff05f076b763df29dd1ffd72ad31a4 GitOrigin-RevId: 7a6a14179fa349d235cf70df57db5e4e4b377fe9 --- plasmicpkgs/react-aria/src/registerModal.tsx | 10 ++++++++++ 1 file changed, 10 insertions(+) diff --git a/plasmicpkgs/react-aria/src/registerModal.tsx b/plasmicpkgs/react-aria/src/registerModal.tsx index e9a1b40dfb4..2767319ae09 100644 --- a/plasmicpkgs/react-aria/src/registerModal.tsx +++ b/plasmicpkgs/react-aria/src/registerModal.tsx @@ -48,6 +48,7 @@ export const BaseModal = forwardRef( isOpen, resetClassName, setControlContextData, + isDismissable, ...rest } = props; @@ -57,6 +58,15 @@ export const BaseModal = forwardRef( const isStandalone = !contextProps; const mergedProps = mergeProps(contextProps, rest, { isOpen: isStandalone ? isSelected || isOpen : contextProps.isOpen, + /** + * isDismissable on canvas (non-interactive mode) causes the following two issues: + * 1. Clicking anywhere inside the modal dismisses it + * 2. If the modal is auto-opened due to selection in outline tab, the modal stays open despite issue #1, but the text elements inside the modal are no longer selectable, and therefore the text or headings inside the modal are not editable. + * + * To fix the above issue, we set an interim isDismissable state to false while the modal is auto-open (`isSelected` is true). + * Also note that `isSelected` can only be true in canvas (non-interactive mode), so we can safely (temporarily) set `isDismissable` to false in this case, because it only matters in interactive mode. + * */ + isDismissable: isSelected ? false : isDismissable, }); setControlContextData?.({