Editor change event triggered when text not changed

[Bob]

I have an editor configured like this:

                @(Html.Kendo().EditorFor(m => m.MyTextData)
                    .Tag("div")
                    .Name("MyTextData")
                    .Resizable(x =>
                    {
                        x.Content(true);
                        x.Min(120);
                        x.Max(400);
                        x.Toolbar(false);
                    })
                    .StyleSheets(css => css.Add(Url.ContentVersioned("~/Content/EditorStyles.css")))
                    .Encode(false)
                    .Events(e => e.Change("onEditorChangeOfContent"))
                    .Tools(tools => tools
                        .Clear()
                        .Bold()
                        .Italic()
                        .Underline()
                        .JustifyLeft()
                        .JustifyCenter()
                        .JustifyRight()
                        .InsertUnorderedList()
                        .InsertOrderedList()
                        .InsertLowerRomanList()
                        .InsertUpperRomanList()
                        .Indent()
                        .Outdent()
                        .FirstLineIndent()
                        .SubScript()
                        .SuperScript()
                        .TableEditingWithCellBorder()
                    )
                )

When first clicking in the editor text area then clicking out of the text area without changing any of the text, the blur function is called and in the blur function a comparison is made between "value" and "old".  In this first call to blur, old is undefined so the match is not made and the change event is triggered as if the text was changed.  Note that if the same action of clicking in and out of the text area is done again, old contains the correct value and no change event is triggered, so it works differently the second time.  The change event should not be triggered on the first action as the text was not changed.

Here is the blur function in Kendo:

         _blur: function() {
                var textarea = this.textarea;
                var old = textarea ? textarea.val() : this._oldValue;
                var value = this.options.encoded ? this.encodedValue() : this.value();

                this.update();

                if (textarea) {
                    textarea.trigger("blur");
                }

                if (value != old) {
                    this.trigger("change");
                    if (textarea) {
                        textarea.trigger("change");
                    }
                }

[Viktor Tachev]

Hello Bob,

I tried to reproduce the behavior you describe, however was not able to. I tested with our Editor Events example and the Change event is triggered only after the value in the editor was changed. When editor content is clicked, the Select event is fired.

In case you are seeing a different behavior, please check the version of the components referenced in your project. Please make sure it is the latest release - currently this is version 2025.4.1217.

 

Regards,
Viktor Tachev
Progress Telerik

[Bob]

Hello Viktor,

I am running the latest version.  Here is how I can reproduce:  First, the editor must be inline (.Tag("div")).  Second, the text property of the model must have data, for example string myTextData { get; set; } = "Some Text";   When the page is loaded, I have a breakpoint set in the Kendo.all.js file _blur function where it compares "if (value != old)".  When the page is first loaded, click into the editor, then click outside the editor to trigger the _blur event.  The value of old at the breakpoint will be undefined and this will trigger the change event.

Please note that if the property in the model is an empty string, it works correctly, and if the editor is not inline, it works correctly.  It must be an inline editor with text loaded.  In your Editor Events example, this is not an inline editor.

Please let me know if I can provide any further details.

 

[Viktor Tachev]

Thank you for the additional information. 

I was able to reproduce the issue and have logged it in our backlog. You can monitor the status of the issue here:

https://github.com/telerik/kendo-ui-core/issues/8415

That said, as a workaround I suggest checking if there is something stored in undoRedoStack. If the stack is empty, then there were no changes made. Thus, cancel the event and do not execute further:

function onChange(e) {
    if (e.sender.undoRedoStack.stack.length == 0) {
        e.preventDefault();
        return;
    }

    console.log("Editor content changed.");
}

[Bob]

Thank you very much for the workaround Viktor!  This is very helpful to avoid the issue for now.   I will look forward to a future build with the fix.