Exclude a button from onBlur from input (Angular)

Question

Good morning, thank you in advance for your help. I have an input that has some buttons positioned with absolute position, I want to make it so that when you blur the input it cancels the edit mode and makes you blur the input, the problem is that if I click on the check icon I want it not to be executed the blur of the input, because I want that when you do check it calls another function, my problem is that when I want to click on the check button, the input detects its blur and cancels the edition

My HTML:

<div class="position-relative w-fit-content">
  <input [(ngModel)]="this.value" #inputEditable [title]="this.isEditing ? '' : 'Este campo es editable'"
    (focus)="this.onFocus($event)" (keyup.enter)="this.onInputEditableChange(inputEditable)"
    (keyup.escape)="this.onCancel(inputEditable)" (blur)="this.onCancel(inputEditable)" class="input" />
  <fa-icon *ngIf="this.isEditing" (click)="this.onCancel(inputEditable)" class="cancel-edit-icon"
    [icon]="this.iconService.getIcon('faTimes')">
  </fa-icon>
  <fa-icon *ngIf="this.isEditing" (click)="this.onInputEditableChange(inputEditable);" class="confirm-edit-icon"
    [icon]="this.iconService.getIcon('faCheck')">
  </fa-icon>
</div>

My TS:

  @Input() fieldName: string = 'Titulo';
  @Input() value: string = 'Hola';
  isEditing = false;
  oldValue: string;

  constructor(public iconService: IconService, private toastNotificationService: ToastNotificationService) { }

  ngOnInit(): void {
  }

  onFocus(event: any) {
    this.oldValue = event.target.value;
    this.isEditing = true;
  }

  onInputEditableChange(inputDirective: HTMLInputElement) {
    let newValue = this.value;
    if (newValue != this.oldValue) {
      this.toastNotificationService.success(`Has modificado el valor del campo "${this.fieldName}"`);
    }
    this.onBlur(inputDirective);
  }

  onCancel(inputDirective: HTMLInputElement) {
    this.toastNotificationService.warning(`Has cancelado la edición del campo "${this.fieldName}"`);
    this.value = this.oldValue;
    this.onBlur(inputDirective);
  }

  onBlur(inputDirective: HTMLInputElement) {
    this.isEditing = false;
    inputDirective.blur();
  }

My CSS:

.input {
  background: transparent;
  border: none;
  font-size: 0.9rem;
  font-weight: 700;
}

.input:focus-visible {
  border: none;
  outline: none;
}

.cancel-edit-icon {
  position: absolute;
  top: 0;
  right: 1.4rem;
  font-size: 1.1rem;
  cursor: pointer;
}

.confirm-edit-icon {
  position: absolute;
  top: 0;
  right: 0rem;
  font-size: 1.1rem;
  cursor: pointer;
}

Thanks for the help! :)

can you share the code instead of images

DEV
– DEV

2022-07-04 13:34:05 +00:00
Commented Jul 4, 2022 at 13:34 — DEV
– DEV, Commented Jul 4, 2022 at 13:34
@Hamza yeah sure, sorry

en44no
– en44no

2022-07-04 13:36:00 +00:00
Commented Jul 4, 2022 at 13:36 — en44no
– en44no, Commented Jul 4, 2022 at 13:36

DEV · Accepted Answer · 2022-07-04 13:46:03Z

1

Try adding a timeout to your blur fonction so it takes some time before blur, and your code detect the checkbox if it's checked/unchecked

  onBlur(inputDirective: HTMLInputElement) {
    setTimeout(() => {
     this.isEditing = false;
     inputDirective.blur();
    }, 1000);
  }

answered Jul 4, 2022 at 13:46

DEV

1,7562 gold badges9 silver badges21 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

DEV Over a year ago

the time is in ms

en44no Over a year ago

+1 @Hamza thanks for your help, I made the input (blur) call the onBlur function with the code you gave me and it works perfectly, I just lowered the ms but your solution is perfect, thank you very much :)

Collectives™ on Stack Overflow

Exclude a button from onBlur from input (Angular)

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related