Editable Table value duplicate during blur event?


Topic: Editable Table value duplicate during blur event?

ariful asked 3 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)"
                                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.


Arkadiusz Idzikowski staff commented 3 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 commented 3 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 3 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:

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

Please insert min. 20 characters.

FREE CONSULTATION

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

Status

Answered

Specification of the issue
  • User: 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