Images in Editor trigger valueChange when no actual data changed

[Bob]

Hello,

I am using a Kendo jquery editor in Angular, and I need to trigger a valueChange event for only when the user is entering and changing data, so that the document can be properly marked as dirty.  However, I am finding that the editor is injecting attributes on its own to image tags in the data, and these attributes are then triggering a false valueChange.  The attributes I have seen so far are:

• aria-describedby
• class="k-state-border-down"
• data-role="tooltip"

These attributes are typically added when the image is clicked on, or right-clicked after selection.  The blur event then causes a change event to trigger the valueChange.

Is it possible to suppress a valueChange when Kendo is adding these attributes?  Can you please provide examples of how we might be able to avoid these change events?

Thanks for your help,

Bob

[Martin]

Could you please share the steps so that I can observe the behaviour on our demos? Thank you!

[Bob]

Hello Martin,

We are currently working around the issue by removing the attributes on the valueChange handler.  When I get some time, I will try to create a dojo example of the issue.  I don't think it can be replicated in the demos because they are not using Angular.

Our workaround:

  private handleEditorValueChanged(newValue: string) {
    const normalizedNewValue = this.normalizeValue(newValue);

    if (this.currentValue !== normalizedNewValue) {
      this.currentValue = normalizedNewValue;
      this.valueChange.emit(normalizedNewValue);
    }
  }

  private normalizeValue(value: string): string {
    let regExp = new RegExp('class="k-state-border-down" ', 'gi');
    value = removeAll(value, regExp);
    regExp = new RegExp('data-role="tooltip" ', 'gi');
    value = removeAll(value, regExp);
    regExp = new RegExp('aria-describedby=".+" ', 'gi');
    return removeAll(value, regExp);
  }