Merge pull request #839 from devtron-labs/chore/modal-outside-clicks

feat: remove stop propagation from modals

Author: arunjaindev

package-lock.json

@@ -1,6 +1,6 @@
 {
     "name": "@devtron-labs/devtron-fe-common-lib",
-    "version": "1.18.1-pre-2",
+    "version": "1.18.1-pre-3",
     "description": "Supporting common component library",
     "type": "module",
     "main": "dist/index.js",

package.json

@@ -58,7 +58,7 @@ export class VisibleModal extends React.Component<{
                 onClick={this.handleBodyClick}
                 initialFocus={this.props.initialFocus ?? undefined}
             >
-                <div className={this.props.parentClassName} onClick={stopPropagation}>
+                <div className={this.props.parentClassName}>
                     <div className={`visible-modal__body ${this.props.className || ''}`}>{this.props.children}</div>
                 </div>
             </Backdrop>

src/Common/Modals/VisibleModal.tsx

@@ -40,9 +40,7 @@ export class VisibleModal2 extends React.Component<{
                 onClick={this.handleBodyClick}
                 initialFocus={this.props.initialFocus ?? undefined}
             >
-                <div className={`visible-modal__body ${this.props.className || ''}`} onClick={stopPropagation}>
-                    {this.props.children}
-                </div>
+                <div className={`visible-modal__body ${this.props.className || ''}`}>{this.props.children}</div>
             </Backdrop>
         )
     }

src/Common/Modals/VisibleModal2.tsx

@@ -20,7 +20,7 @@ import { ReactComponent as ICClose } from '@Icons/ic-cross.svg'
 import { ReactComponent as ICSearch } from '@Icons/ic-search.svg'
 import NoVariables from '@Images/no-artifact.webp'
 import { DebouncedSearch, GenericEmptyState, Progressing, Reload } from '@Common/index'
-import { ComponentSizeType } from '@Shared/constants'
+import { ALLOW_ACTION_OUTSIDE_FOCUS_TRAP, ComponentSizeType } from '@Shared/constants'
 
 import { Button, ButtonStyleType, ButtonVariantType } from '../Button'
 import { Icon } from '../Icon'
@@ -87,7 +87,7 @@ const Suggestions = ({
 
                 <div className="h-100">
                     <Button
-                        icon={<ICClose />}
+                        icon={<ICClose className={ALLOW_ACTION_OUTSIDE_FOCUS_TRAP} />}
                         ariaLabel="Close suggestions"
                         showAriaLabelInTippy={false}
                         dataTestId="deactivate-suggestions"