From 7f2e789fef44b6818d5b759aca0960fefca530bb Mon Sep 17 00:00:00 2001
From: mertsincan <sincan.mert@gmail.com>
Date: Mon, 1 Mar 2021 13:30:46 +0300
Subject: [PATCH] Refactor #1832 - For DataTable cell editing

---
 src/components/datatable/BodyCell.js | 44 +++++++++++++++++-----------
 1 file changed, 27 insertions(+), 17 deletions(-)

diff --git a/src/components/datatable/BodyCell.js b/src/components/datatable/BodyCell.js
index a78ee507fa..27e423c548 100644
--- a/src/components/datatable/BodyCell.js
+++ b/src/components/datatable/BodyCell.js
@@ -1,9 +1,10 @@
 import React, { Component } from 'react';
 import { classNames } from '../utils/ClassNames';
+import { PrimeEventBus } from '../utils/PrimeEventBus';
 import ObjectUtils from '../utils/ObjectUtils';
 import DomHandler from '../utils/DomHandler';
-import {RowRadioButton} from './RowRadioButton';
-import {RowCheckbox} from './RowCheckbox';
+import { RowRadioButton } from './RowRadioButton';
+import { RowCheckbox } from './RowCheckbox';
 import { Ripple } from '../ripple/Ripple';
 
 export class BodyCell extends Component {
@@ -19,6 +20,8 @@ export class BodyCell extends Component {
         this.onBlur = this.onBlur.bind(this);
         this.onKeyDown = this.onKeyDown.bind(this);
         this.onEditorFocus = this.onEditorFocus.bind(this);
+
+        this.eventBusKey = `${this.props.field}_${this.props.rowIndex}`;
     }
 
     onExpanderClick(event) {
@@ -60,6 +63,12 @@ export class BodyCell extends Component {
 
                 if (this.props.editorValidatorEvent === 'click') {
                     this.bindDocumentEditListener();
+
+                    PrimeEventBus.on('overlay-click', (e) => {
+                        if (!this.isOutsideClicked(e.target)) {
+                            this.selfClick = true;
+                        }
+                    }, this.eventBusKey);
                 }
             });
         }
@@ -80,7 +89,7 @@ export class BodyCell extends Component {
     bindDocumentEditListener() {
         if (!this.documentEditListener) {
             this.documentEditListener = (e) => {
-                if (this.isOutsideClicked(e)) {
+                if (!this.selfClick && this.isOutsideClicked(e.target)) {
                     this.switchCellToViewMode(e, true);
                 }
 
@@ -91,8 +100,8 @@ export class BodyCell extends Component {
         }
     }
 
-    isOutsideClicked(event) {
-        return !this.selfClick && this.container && !(this.container.isSameNode(event.target) || this.container.contains(event.target));
+    isOutsideClicked(target) {
+        return this.container && !(this.container.isSameNode(target) || this.container.contains(target));
     }
 
     closeCell() {
@@ -102,6 +111,7 @@ export class BodyCell extends Component {
                 editing: false
             }, () => {
                 this.unbindDocumentEditListener();
+                PrimeEventBus.off('overlay-click', this.eventBusKey);
             });
         }, 1);
     }
@@ -176,14 +186,14 @@ export class BodyCell extends Component {
 
     render() {
         let content, header, editorKeyHelper;
-        let cellClassName = classNames(this.props.bodyClassName||this.props.className, {
-                                'p-selection-column': this.props.selectionMode,
-                                'p-editable-column': this.props.editor,
-                                'p-cell-editing': this.state.editing && this.props.editor
-                            });
+        let cellClassName = classNames(this.props.bodyClassName || this.props.className, {
+            'p-selection-column': this.props.selectionMode,
+            'p-editable-column': this.props.editor,
+            'p-cell-editing': this.state.editing && this.props.editor
+        });
 
         if (this.props.expander) {
-            const iconClassName = classNames('p-row-toggler-icon pi pi-fw p-clickable', {'pi-chevron-down': this.props.expanded, 'pi-chevron-right': !this.props.expanded});
+            const iconClassName = classNames('p-row-toggler-icon pi pi-fw p-clickable', { 'pi-chevron-down': this.props.expanded, 'pi-chevron-right': !this.props.expanded });
             let expanderProps = {
                 onClick: this.onExpanderClick,
                 className: 'p-row-toggler p-link',
@@ -199,7 +209,7 @@ export class BodyCell extends Component {
 
             if (this.props.body) {
                 expanderProps['element'] = content;
-                content = this.props.body(this.props.rowData, { ...this.props, ...{expander: expanderProps} });
+                content = this.props.body(this.props.rowData, { ...this.props, ...{ expander: expanderProps } });
             }
         }
         else if (this.props.selectionMode) {
@@ -210,9 +220,9 @@ export class BodyCell extends Component {
 
             if (showSelection) {
                 if (this.props.selectionMode === 'single')
-                    content = <RowRadioButton onClick={this.props.onRadioClick} rowData={this.props.rowData} selected={this.props.selected}/>;
+                    content = <RowRadioButton onClick={this.props.onRadioClick} rowData={this.props.rowData} selected={this.props.selected} />;
                 else
-                    content = <RowCheckbox onClick={this.props.onCheckboxClick} rowData={this.props.rowData} selected={this.props.selected}/>;
+                    content = <RowCheckbox onClick={this.props.onCheckboxClick} rowData={this.props.rowData} selected={this.props.selected} />;
             }
         }
         else if (this.props.rowReorder) {
@@ -273,7 +283,7 @@ export class BodyCell extends Component {
 
             if (this.props.body) {
                 rowEditorProps['element'] = content;
-                content = this.props.body(this.props.rowData, { ...this.props, ...{rowEditor: rowEditorProps} });
+                content = this.props.body(this.props.rowData, { ...this.props, ...{ rowEditor: rowEditorProps } });
             }
         }
         else {
@@ -290,12 +300,12 @@ export class BodyCell extends Component {
 
         if (this.props.editMode !== 'row') {
             /* eslint-disable */
-            editorKeyHelper = this.props.editor && <a tabIndex="0" ref={(el) => {this.keyHelper = el;}} className="p-cell-editor-key-helper p-hidden-accessible" onFocus={this.onEditorFocus}><span></span></a>;
+            editorKeyHelper = this.props.editor && <a tabIndex="0" ref={(el) => { this.keyHelper = el; }} className="p-cell-editor-key-helper p-hidden-accessible" onFocus={this.onEditorFocus}><span></span></a>;
             /* eslint-enable */
         }
 
         return (
-            <td ref={(el) => {this.container = el;}} className={cellClassName} style={this.props.bodyStyle||this.props.style} onClick={this.onClick} onKeyDown={this.onKeyDown}
+            <td ref={(el) => { this.container = el; }} className={cellClassName} style={this.props.bodyStyle || this.props.style} onClick={this.onClick} onKeyDown={this.onKeyDown}
                 rowSpan={this.props.rowSpan} onBlur={this.onBlur}>
                 {header}
                 {editorKeyHelper}