@syncfusion/ej2-inplace-editor 20.4.42 → 20.4.54

package/dist/es6/ej2-inplace-editor.es2015.js

@@ -881,7 +881,7 @@ let InPlaceEditor = class InPlaceEditor extends Component {
             this.submitBtn = undefined;
         }
         if (!isNullOrUndefined(this.cancelBtn)) {
-            EventHandler.remove(this.cancelBtn.element, 'mousedown', this.cancelBtnClick);
+            EventHandler.remove(this.cancelBtn.element, 'mouseup', this.cancelBtnClick);
             EventHandler.remove(this.cancelBtn.element, 'keydown', this.btnKeyDownHandler);
             this.cancelBtn.destroy();
             this.cancelBtn = undefined;
@@ -1022,6 +1022,13 @@ let InPlaceEditor = class InPlaceEditor extends Component {
             let count = 0;
             this.formValidate = new FormValidator(this.formEle, {
                 rules: this.validationRules,
+                validationBegin: (e) => {
+                    if (this.type === 'RTE') {
+                        let ele = document.createElement('div');
+                        ele.innerHTML = e.value;
+                        e.value = ele.innerText;
+                    }
+                },
                 validationComplete: (e) => {
                     count = count + 1;
                     args = {
@@ -1165,7 +1172,7 @@ let InPlaceEditor = class InPlaceEditor extends Component {
             EventHandler.add(this.submitBtn.element, 'keydown', this.btnKeyDownHandler, this);
         }
         if (!isNullOrUndefined(this.cancelBtn)) {
-            EventHandler.add(this.cancelBtn.element, 'mousedown', this.cancelBtnClick, this);
+            EventHandler.add(this.cancelBtn.element, 'mouseup', this.cancelBtnClick, this);
             EventHandler.add(this.cancelBtn.element, 'keydown', this.btnKeyDownHandler, this);
         }
     }
@@ -1471,57 +1478,61 @@ let InPlaceEditor = class InPlaceEditor extends Component {
      * @private
      */
     onPropertyChanged(newProp, oldProp) {
-        if (this.isEditorOpen()) {
-            const editModeChanged = 'enableEditMode' in newProp;
-            if ((editModeChanged && oldProp.enableEditMode && !newProp.enableEditMode) || (!editModeChanged && this.enableEditMode)) {
-                this.triggerEndEdit('cancel');
-            }
-            else {
-                this.removeEditor();
+        let checkValidation = this.validationRules ? !isNullOrUndefined(this.element.querySelectorAll('.' + ERROR)) &&
+            this.element.querySelectorAll('.' + ERROR).length > 0 ? false : true : true;
+        if (checkValidation) {
+            if (this.isEditorOpen()) {
+                const editModeChanged = 'enableEditMode' in newProp;
+                if ((editModeChanged && oldProp.enableEditMode && !newProp.enableEditMode) || (!editModeChanged && this.enableEditMode)) {
+                    this.triggerEndEdit('cancel');
+                }
+                else {
+                    this.removeEditor();
+                }
             }
-        }
-        for (const prop of Object.keys(newProp)) {
-            switch (prop) {
-                case 'showButtons':
-                    // eslint-disable-next-line
-                    (newProp.showButtons) ? this.appendButtons(this.formEle) : this.destroyButtons();
-                    break;
-                case 'value':
-                    this.updateValue();
-                    // eslint-disable-next-line
-                    this.textOption === 'Never' ? this.renderValue(this.checkValue(parseValue(this.type, this.value, this.model)))
-                        : this.renderInitialValue();
-                    break;
-                case 'emptyText':
-                    // eslint-disable-next-line
-                    this.textOption === 'Never' ? this.renderValue(this.checkValue(parseValue(this.type, this.value, this.model)))
-                        : this.renderInitialValue();
-                    break;
-                case 'template':
-                    this.checkIsTemplate();
-                    break;
-                case 'disabled':
-                    this.disable(newProp.disabled);
-                    break;
-                case 'enableRtl':
-                    this.setRtl(newProp.enableRtl);
-                    break;
-                case 'cssClass':
-                    this.setClass('remove', oldProp.cssClass);
-                    this.setClass('add', newProp.cssClass);
-                    break;
-                case 'mode':
-                    this.enableEditor(this.enableEditMode);
-                    break;
-                case 'enableEditMode':
-                    this.enableEditor(newProp.enableEditMode);
-                    break;
-                case 'editableOn':
-                    this.unWireEditEvent(oldProp.editableOn);
-                    if (newProp.editableOn !== 'EditIconClick') {
-                        this.wireEditEvent(newProp.editableOn);
-                    }
-                    break;
+            for (const prop of Object.keys(newProp)) {
+                switch (prop) {
+                    case 'showButtons':
+                        // eslint-disable-next-line
+                        (newProp.showButtons) ? this.appendButtons(this.formEle) : this.destroyButtons();
+                        break;
+                    case 'value':
+                        this.updateValue();
+                        // eslint-disable-next-line
+                        this.textOption === 'Never' ? this.renderValue(this.checkValue(parseValue(this.type, this.value, this.model)))
+                            : this.renderInitialValue();
+                        break;
+                    case 'emptyText':
+                        // eslint-disable-next-line
+                        this.textOption === 'Never' ? this.renderValue(this.checkValue(parseValue(this.type, this.value, this.model)))
+                            : this.renderInitialValue();
+                        break;
+                    case 'template':
+                        this.checkIsTemplate();
+                        break;
+                    case 'disabled':
+                        this.disable(newProp.disabled);
+                        break;
+                    case 'enableRtl':
+                        this.setRtl(newProp.enableRtl);
+                        break;
+                    case 'cssClass':
+                        this.setClass('remove', oldProp.cssClass);
+                        this.setClass('add', newProp.cssClass);
+                        break;
+                    case 'mode':
+                        this.enableEditor(this.enableEditMode);
+                        break;
+                    case 'enableEditMode':
+                        this.enableEditor(newProp.enableEditMode);
+                        break;
+                    case 'editableOn':
+                        this.unWireEditEvent(oldProp.editableOn);
+                        if (newProp.editableOn !== 'EditIconClick') {
+                            this.wireEditEvent(newProp.editableOn);
+                        }
+                        break;
+                }
             }
         }
     }