0

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>
chuckd
  • 13,460
  • 29
  • 152
  • 331
  • have you tried: `$event.stopPropagation()`? – Michael Kang Nov 20 '20 at 00:42
  • 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? – chuckd 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 – chuckd Nov 20 '20 at 00:50

1 Answers1

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".

Hopey One
  • 1,681
  • 5
  • 10