Why is one element with custom directive triggering another elements change event in Angular?

Question

I have a form below with multiple elements. One element is an input with a custom directive for getting google location data. The other element is a file upload element.

When I enter in a value (in focus) in the top element and press enter, it triggers 'fileChangeEvent()' event in the #fileInput element.

I'm having a hard time understanding why?

FYI - I tried changing

(change)="fileChangeEvent($event)"

to

(click)="fileChangeEvent($event)"

and it still gets triggered

Form -

<form [formGroup]="editForm">

  // pressing enter, with this element in focus, triggers fileChangeEvent($event) in #fileInput element below
  <input #city appGooglePlaces (onSelect)="setAddress($event)" formControlName="city" class="form-control google-place-input">


  <button (click)="fileInput.click()" class="btn btn-yb w-100">Upload Photo</button>
  <input type="file" #fileInput (change)="fileChangeEvent($event)" />

</form>

but it shouldn't be triggering another elements change event to begin with...why is it? Do I have something somewhere else that could be triggering it? — user1186050, Nov 20 '20 at 00:47
if I comment out '' than it doesn't get triggered when I hit return in the top element, but then the button isn't there — user1186050, Nov 20 '20 at 00:50

score 2 · Accepted Answer · answered Nov 20 '20 at 00:43

2

Have a look at this issue, I think your problem is your button is in a form therefore the default action for the enter key is to submit the form. By default your button is type "submit".

answered Nov 20 '20 at 00:43

Hopey One

1,474
3
9

thanks! I didn't realize the default for a button was submit!!!!!!! – user1186050 Nov 20 '20 at 01:01

Why is one element with custom directive triggering another elements change event in Angular?

1 Answers1