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;
}
}
sql-server