Topic: Editable Table value duplicate during blur event?

ariful free asked 2 years ago

I'm trying to create an editable table based on MDB Angular 4 Admin Dashboard editable table, but when entering a value, the entered value gets duplicated. (E.g. when I enter 'a' and leave the element, it updates itself to 'aa')

This seems to occur only when the editable property was undefined or explicitly null at initialization. My code below:

 <td class="text-left green lighten-4"
                            *ngIf="i+1 >= mdbTablePagination.firstItemIndex && i < mdbTablePagination.lastItemIndex && el.status == 'M'">
                            <span mdbInput 
                            (keyup)="changeValue(i, 'remarks', $event)"
                                (blur)="updateList(i, 'remarks', $event)"

 updateList(i: number, property: any, event: any) {
const editField =;
this.elements[i][property] = editField; }

changeValue(i: number, property: any, event: any) {
this.editField =; }

Please solve this issue as soon as possible, It's urgent for me. Thanks in advanced.

Arkadiusz Idzikowski staff commented 2 years ago

@ariful Thank you for reporting this issue. I can confirm that there is a bug, but we need some more time to find the cause of the problem.

ariful free commented 2 years ago

Hi! Arkadiusz Idzikowski, Thanks for your replay.

Ya, It's a bug and it's pending from more then 1 years. Please fix this issue as high priority.

Regards, Ariful

Arkadiusz Idzikowski staff answered 2 years ago

@ariful It looks like the text content of the element with contenteditable is not cleared correctly when Angular template binding {{ value }} is used. Please try to use [textContent] input instead:

        <span (keyup)="changeValue(id, 'name', $event)" (blur)="updateList(id, 'name', $event)" contenteditable="true" [textContent]=""></span>

Please insert min. 20 characters.


Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.



Specification of the issue

  • ForumUser: Free
  • Premium support: No
  • Technology: MDB Angular
  • MDB Version: MDB4 12.0.0
  • Device: Desktop
  • Browser: Chrome
  • OS: Windows 10
  • Provided sample code: No
  • Provided link: No