DataTable: Fix and Simplify overlay handling in cell edit mode (#7951)

* Improve Overlay Handling (Minimal)

* cleanup

* Add Props to other overlay components

Author: gnawjaren

components/lib/autocomplete/AutoCompletePanel.js

@@ -268,7 +268,8 @@ export const AutoCompletePanel = React.memo(
                 {
                     className: classNames(props.panelClassName, cx('panel', { context })),
                     style,
-                    onClick: (e) => props.onClick(e)
+                    onClick: (e) => props.onClick(e),
+                    'data-pr-is-overlay': true
                 },
                 _ptm('panel')
             );

components/lib/calendar/CalendarPanel.js

@@ -18,7 +18,8 @@ export const CalendarPanel = React.forwardRef((props, ref) => {
                 'aria-label': localeOption('chooseDate', props.locale),
                 'aria-modal': props.inline ? null : 'true',
                 onClick: props.onClick,
-                onMouseUp: props.onMouseUp
+                onMouseUp: props.onMouseUp,
+                'data-pr-is-overlay': true
             },
             props.ptm('panel', { hostName: props.hostName })
         );

components/lib/colorpicker/ColorPickerPanel.js

@@ -14,7 +14,8 @@ export const ColorPickerPanel = React.forwardRef((props, ref) => {
             {
                 className: cx('panel', { panelProps: props, context }),
                 style: props.panelStyle,
-                onClick: props.onClick
+                onClick: props.onClick,
+                'data-pr-is-overlay': true
             },
             ptm('panel', { hostName: props.hostName })
         );

components/lib/datatable/BodyCell.js

@@ -8,7 +8,6 @@ import { ChevronDownIcon } from '../icons/chevrondown';
 import { ChevronRightIcon } from '../icons/chevronright';
 import { PencilIcon } from '../icons/pencil';
 import { TimesIcon } from '../icons/times';
-import { OverlayService } from '../overlayservice/OverlayService';
 import { Ripple } from '../ripple/Ripple';
 import { DomHandler, IconUtils, ObjectUtils, classNames } from '../utils/Utils';
 import { RowCheckbox } from './RowCheckbox';
@@ -21,13 +20,10 @@ export const Cell = (props) => {
     const [styleObjectState, setStyleObjectState] = React.useState({});
     const elementRef = React.useRef(null);
     const keyHelperRef = React.useRef(null);
-    const overlayEventListener = React.useRef(null);
-    const selfClick = React.useRef(false);
     const focusTimeout = React.useRef(null);
     const initFocusTimeout = React.useRef(null);
     const editingRowDataStateRef = React.useRef(null);
     const { ptm, ptmo, cx } = props.ptCallbacks;
-
     const getColumnProp = (name) => ColumnBase.getCProp(props.column, name);
 
     const getColumnPTOptions = (key) => {
@@ -58,18 +54,18 @@ export const Cell = (props) => {
         return getColumnProp('cellEditValidateOnClose');
     };
 
+    const isIgnoredElement = (element) => {
+        const isOverlay = (el) => el.getAttribute && el.getAttribute('data-pr-is-overlay');
+
+        return isOverlay(element) || DomHandler.getParents(element).find((el) => isOverlay(el));
+    };
+
     const [bindDocumentClickListener, unbindDocumentClickListener] = useEventListener({
         type: 'click',
         listener: (e) => {
-            setTimeout(() => {
-                if (!selfClick.current && isOutsideClicked(e.target)) {
-                    // #2666 for overlay components and outside is clicked
-
-                    switchCellToViewMode(e, true);
-                }
-            }, 0);
-
-            selfClick.current = false;
+            if (!isIgnoredElement(e.target) && isOutsideClicked(e.target)) {
+                switchCellToViewMode(e, true);
+            }
         },
         options: true,
         when: isEditable()
@@ -120,9 +116,6 @@ export const Cell = (props) => {
         setTimeout(() => {
             setEditingState(false);
             unbindDocumentClickListener();
-            OverlayService.off('overlay-click', overlayEventListener.current);
-            overlayEventListener.current = null;
-            selfClick.current = false;
         }, 1);
     };
 
@@ -175,7 +168,7 @@ export const Cell = (props) => {
     };
 
     const onClick = (event) => {
-        props.onClick(event, getCellCallbackParams(event), isEditable(), editingState, setEditingState, selfClick, props.column, bindDocumentClickListener, overlayEventListener, isOutsideClicked);
+        props.onClick(event, getCellCallbackParams(event), isEditable(), editingState, setEditingState, props.column, bindDocumentClickListener);
     };
 
     const onMouseDown = (event) => {
@@ -276,8 +269,6 @@ export const Cell = (props) => {
     };
 
     const onBlur = (event) => {
-        selfClick.current = false;
-
         if (props.editMode !== 'row' && editingState && getColumnProp('cellEditValidatorEvent') === 'blur') {
             switchCellToViewMode(event, true);
         }
@@ -363,11 +354,6 @@ export const Cell = (props) => {
     }, [editingState]);
 
     useUnmountEffect(() => {
-        if (overlayEventListener.current) {
-            OverlayService.off('overlay-click', overlayEventListener.current);
-            overlayEventListener.current = null;
-        }
-
         if (editingRowDataStateRef.current) {
             editingRowDataStateRef.current = null;
         }

components/lib/datatable/BodyRow.js

@@ -3,7 +3,6 @@ import { ColumnBase } from '../column/ColumnBase';
 import { useMergeProps } from '../hooks/Hooks';
 import { classNames, DomHandler, ObjectUtils } from '../utils/Utils';
 import { BodyCell, RadioCheckCell } from './BodyCell';
-import { OverlayService } from '../overlayservice/OverlayService';
 import { Fragment } from 'react';
 
 export const BodyRow = React.memo((props) => {
@@ -534,10 +533,8 @@ export const BodyRow = React.memo((props) => {
         }
     }, []);
 
-    const onCellClick = (event, params, isEditable, editingState, setEditingState, selfClick, column, bindDocumentClickListener, overlayEventListener, isOutsideClicked) => {
+    const onCellClick = (event, params, isEditable, editingState, setEditingState, column, bindDocumentClickListener) => {
         if (props.editMode !== 'row' && isEditable && !editingState && (props.selectOnEdit || (!props.selectOnEdit && props.isRowSelected))) {
-            selfClick.current = true;
-
             const onBeforeCellEditShow = getColumnProp(column, 'onBeforeCellEditShow');
             const onCellEditInit = getColumnProp(column, 'onCellEditInit');
             const cellEditValidatorEvent = getColumnProp(column, 'cellEditValidatorEvent');
@@ -571,14 +568,6 @@ export const BodyRow = React.memo((props) => {
 
                 if (cellEditValidatorEvent === 'click') {
                     bindDocumentClickListener();
-
-                    overlayEventListener.current = (e) => {
-                        if (!isOutsideClicked(e.target)) {
-                            selfClick.current = true;
-                        }
-                    };
-
-                    OverlayService.on('overlay-click', overlayEventListener.current);
                 }
             }, 1);
         }

components/lib/dropdown/DropdownPanel.js

@@ -309,7 +309,8 @@ export const DropdownPanel = React.memo(
                 {
                     className: classNames(props.panelClassName, cx('panel', { context })),
                     style: sx('panel'),
-                    onClick: props.onClick
+                    onClick: props.onClick,
+                    'data-pr-is-overlay': true
                 },
                 getPTOptions('panel')
             );

components/lib/multiselect/MultiSelectPanel.js

@@ -266,7 +266,8 @@ export const MultiSelectPanel = React.memo(
                 {
                     className: classNames(props.panelClassName, cx('panel', { panelProps: props, context, allowOptionSelect })),
                     style: props.panelStyle,
-                    onClick: props.onClick
+                    onClick: props.onClick,
+                    'data-pr-is-overlay': true
                 },
                 getPTOptions('panel')
             );