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

…arent overlay
neos · May 12, 2023 · bfd2024 · bfd2024
1 parent ef72c79
commit bfd2024
Show file tree

Hide file tree

Showing 2 changed files with 11 additions and 11 deletions.
diff --git a/packages/react-ui-components/src/Dialog/__snapshots__/dialog.spec.tsx.snap b/packages/react-ui-components/src/Dialog/__snapshots__/dialog.spec.tsx.snap
@@ -44,10 +44,11 @@ exports[`<Dialog/> Portal should render correctly. 1`] = `
     <section
       autoFocus={true}
       className="dialogClassName wideClassName errorClassName"
+      onClick={[Function]}
       role="dialog"
       tabIndex={0}
     >
-      <clickOutside(DialogWithoutEscape)
+      <DialogWithoutEscape
         actions={
           Array [
             "Foo 1",
@@ -79,7 +80,7 @@ exports[`<Dialog/> Portal should render correctly. 1`] = `
         type="error"
       >
         Foo children
-      </clickOutside(DialogWithoutEscape)>
+      </DialogWithoutEscape>
     </section>
   </Portal>
 </CloseOnEscape>

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;