CODEWITHSUNDEEP
javascriptangular
methuselah
methuselah

Reputation: 13206

Method not called on blur event applied to span element

I would like the following method to be run:

  setHeroButtonTextOption(heroButtonText) {
    this.builderComponentsService.setPageComponentById(this.componentId, 'heroButtonText', heroButtonText);
  }

Each time the user loses focus of the following element:

<div class="builder-components hero-button-click button-outer-container text-center text-md-left mt-5">
  <div (click)="selectHeroButton($event, componentId + '-button')"
       [attr.data-cy]="'hero-button-container'" [class]="setActiveElement('button')"
       [ngClass]="setHeroClass('hero-button')" class="builder-components hero-button-click button-container"
       id="{{componentId}}-button" style="display:inline-block">
    <button [attr.data-cy]="'hero-button'" [ngStyle]="heroButtonStyle"
            class="builder-components hero-button-click btn hero-button">
      <span (blur)="removeLineBreaks($event); setHeroButtonTextOption($event.target['innerText']);"
            (keydown.enter)="setHeroButtonTextOption($event.target['innerText']); $event.preventDefault()"
            [attr.contenteditable]="setContentEditable()" [attr.data-cy]="'hero-button-text'"
            [innerText]="heroButtonText" class="builder-components hero-button-click">
      </span>
    </button>
  </div>
</div>

Currently, it isn't happening even though I have a blur event on <span>. How can I fix this?

Upvotes: 0

Views: 406

Answers (1)

Chris Danna
Chris Danna

Reputation: 1264

The blur event will be raised from the button, not the span. If you are trying to include the innerText of the span with the event handler, it looks like it is already bound with heroButtonText, which you can pass as a function argument or reference from the component.

<button (blur)="setHeroButtonTextOption(heroButtonText)">
  <span>{{ heroButtonText }}</span>
</button>

Edit - The button should be emitting that blur event. If that isn't working you will need to post more code, it could be that removeLineBreaks($event) is throwing an error, preventing the next call from being made.

Upvotes: 1

Related Questions