BUGFIX: Limit click-outside handling for dialogs to their semi-transp…

…arent overlay
neos · May 12, 2023 · f7918ca · f7918ca
1 parent ef72c79
commit f7918ca
Showing 1 changed file with 8 additions and 9 deletions.
diff --git a/packages/react-ui-components/src/Dialog/dialog.tsx b/packages/react-ui-components/src/Dialog/dialog.tsx
@@ -1,6 +1,5 @@
 import mergeClassNames from 'classnames';
 import React, {PureComponent, ReactNode} from 'react';
-import enhanceWithClickOutside from '../enhanceWithClickOutside/index';
 import CloseOnEscape from 'react-close-on-escape';
 import {Portal} from 'react-portal';
 
@@ -129,10 +128,6 @@ export class DialogWithoutEscape extends PureComponent<DialogProps> {
         this.ref = ref;
     }
 
-    public readonly handleClickOutside = () => {
-        this.props.onRequestClose();
-    }
-
     public readonly componentDidMount = (): void => {
         document.addEventListener('keydown', (event : KeyboardEvent) => this.handleKeyPress(event));
         const {autoFocus} = this.props;
@@ -158,8 +153,6 @@ export class DialogWithoutEscape extends PureComponent<DialogProps> {
     }
 }
 
-const EnhancedDialogWithoutEscapeWithClickOutside = enhanceWithClickOutside(DialogWithoutEscape);
-
 // tslint:disable-next-line:max-classes-per-file
 class DialogWithEscape extends PureComponent<DialogProps> {
     public render(): JSX.Element | null {
@@ -198,8 +191,8 @@ class DialogWithEscape extends PureComponent<DialogProps> {
         return (
             <CloseOnEscape onEscape={this.onEscape}>
                 <Portal>
-                    <section {...rest} className={sectionClassName} role="dialog" tabIndex={0}>
-                        <EnhancedDialogWithoutEscapeWithClickOutside {...this.props}/>
+                    <section {...rest} className={sectionClassName} role="dialog" tabIndex={0} onClick={this.handleOverlayClick}>
+                        <DialogWithoutEscape {...this.props}/>
                     </section>
                 </Portal>
             </CloseOnEscape>
@@ -209,6 +202,12 @@ class DialogWithEscape extends PureComponent<DialogProps> {
     private readonly onEscape = () => {
         this.props.onRequestClose();
     }
+
+    private readonly handleOverlayClick = (ev: React.MouseEvent) => {
+        if (ev.target === ev.currentTarget) {
+            this.props.onRequestClose();
+        }
+    }
 }
 
 export default DialogWithEscape;