pkp/pkp-lib#11693 Address modal compatibility with jquery-ui (date picker)

Author: jardakotesovec

src/components/Form/fields/FieldRichTextarea.vue

@@ -406,9 +406,4 @@ export default {
 		direction: rtl;
 	}
 }
-// #11693 reka-ui sets pointer-events: none on body when modal is opened
-// which prevented to click on tinyMCE modals
-body .tox-tinymce-aux.tox {
-	pointer-events: auto;
-}
 </style>

src/components/Modal/SideModalBody.vue

@@ -123,7 +123,7 @@ const closeModalButton = inject('closeModalButton');
 // #11693 When tinyMCE modal is opened inside modal, ignore outside clicks to prevent closing the current modals
 function handleOutsideEvent(event) {
 	// Check if the target is part of TinyMCE's dialog
-	if (event.target.closest('.tox-tinymce-aux')) {
+	if (event.target.closest('.tox-tinymce-aux, .ui-widget')) {
 		event.preventDefault(); // Bypass the focus trap for TinyMCE elements
 	}
 }
@@ -187,3 +187,15 @@ html[dir='rtl'] .DialogContent[data-state='closed'] {
 	animation: sideModalSlideOutRtl 450ms ease-in-out;
 }
 </style>
+<style>
+/** #11693 reka-ui sets pointer-events: none on body when modal is opened */
+/** Addresses jquery widgets, like the date selector */
+.ui-widget {
+	pointer-events: auto;
+}
+
+/** Addresses tinyMCE modals */
+body .tox-tinymce-aux.tox {
+	pointer-events: auto;
+}
+</style>