Editable Table value duplicate during blur event?

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)"
                                contenteditable="true">{{el.remarks}}</span>
                        </td>

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

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

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