grand parent is handling custom event emitted instead of parent in Angular 17

Question

I have a component called ImageUpload that handles pictures upload and then emit the values. I use that component inside a component called IngredientForm and it works, the problem is inside IngredientForm there's another component called ModifyIngredientModal where i use ImageUpload again and when the event is emitted from there then it's handled with the method i've wrote inside IngredientForm and not the one from ModifyIngredientModal.

Basically the grand-parent is handling the child event instead of the parent.

this is the code of ModifyIngredientModal

  <app-image-upload
    [label]="'recipes.editor.ingredients.picture' | transloco"
    [inputName]="'ingredientPicture'"
    (photoUploaded)="uploadNewPicture($event)">
  </app-image-upload>

  uploadNewPicture(uploadedPictures: customFile[]) {
    console.log("MODIFY")
    if (uploadedPictures[0]) {
      this.ingredientPicture = uploadedPictures[0];
      this.ingredientForm.controls.ingredientPicture.setValue(true)
    } else {
      this.ingredientForm.controls.ingredientPicture.setValue(false)
    }
  }

and this is the one from IngredientForm

 <app-image-upload
   #ingredientPictureUpload
   [label]="'recipes.editor.ingredients.picture' | transloco"
   [inputName]="'ingredientPicture'"
   (photoUploaded)="getIngredientUploadedPhoto($event)">
 </app-image-upload>

  getIngredientUploadedPhoto(uploadedPictures: customFile[]) {
    console.log("FORM")
    if (uploadedPictures[0]) {
      this.ingredientPicture = uploadedPictures[0];
      this.ingredientForm.controls.ingredientPicture.setValue(true)
    } else {
      this.ingredientPicture = null;
      this.ingredientForm.controls.ingredientPicture.setValue(false)
    }
  }

in the console i can only see FORM printed, i was expecting that the parent would handle the event and it stops there, i could understand the event being handled by both of them but surely not having only the grand parent handling it

Answer 1

ok i've found the problem, basically my component wrapped the input for the file in a label and used the attribute for of the label to reference the input. my two component had the same id so when i clicked the second it probably read the html top - down and activated the event for the first one... stack blitz worked because i didnt have any css there so i was clicking on the normal input