0

I want to open a modal whenever the user presses enter on the contenteditable field, and also when the user loses focus on the element. The issue is that when the user presses enter, both events are fired (so two modals open up). How can I find a comfortable compromise, which only allows each of the events to be fired?

Code below:

HTML

<div (blur)="removeLineBreaks($event); openRenameWebsiteModal($event);"
             (keydown.enter)="openRenameWebsiteModal($event)"
             [attr.contenteditable]="true"
             [attr.spellcheck]="false"
             *ngIf="websiteLoaded"
             id="builder-header-website-name"
             blockNonAlphanumericCharacters
             class="website-name" ngbPopover="Website Name" triggers="mouseenter:mouseleave">{{ websiteName }}</div>

Typescript

  removeLineBreaks(event: any) {
    event.preventDefault();
    event.stopPropagation();
    BuilderService.removeLineBreaks(event);
  }

  openRenameWebsiteModal(event: any) {
    event.preventDefault();
    event.stopPropagation();
    if (this.websiteName !== event.target.innerHTML) {
      const modal = this.modalService.open(BuilderRenameWebsiteModalComponent, {
        windowClass: 'modal-holder',
        centered: true
      });
      modal.componentInstance.websiteName = this.websiteName;
      modal.componentInstance.newWebsiteName = event.target.innerHTML;
    }
  }

1 Answers

MA==
)ݣj&֥]z
bj{ykym?ZrJ/z(zb{?:;0kʉzZbrCi^