Input 'Go' field on Keyboard is doing two things

@CoderSte wrote:

I am building an Ionic App for iOS & Android and so far I have a form where users can upload or take a photo and then fill in some other information and submit the form.

My issue:

Currently when the user goes to an Input to enter some extra text there is a go button at the bottom of the keyboard. If the user clicks this 'Go' button it tries to submit the form along with opening the choosePicture() function I have.

I have linked to a GIF below showing exactly what happens
Go opens the Library

The HTML

<ion-item class="file-upload">
    <button  class="btn btn-block" ion-button (click)="choosePhoto()">Choose a Photo</button>
    <span class="sep"></span>
    <button class="btn btn-block" ion-button (click)="takePicture()">Take a Picture</button>
    <div class="uploaded-img">
        <input type="file" value="" formControlName="hazardImage" hidden />
        <span class="img-desc">Please Take or Upload an Image.</span>
        <div class="img-picked" *ngIf="base64Img">
            <img [src]="base64Img" alt="Hazard Picture" />
            <!-- <img src="http://placehold.it/300x300" alt="Test Image" /> -->
        </div>
    </div>
</ion-item>

<small class="small-title">Where is the Hazard Location? (required)</small>
<ion-item class="input-box">
    <ion-input type="text" formControlName="hazardLocation" [class.invalid]="!hazardForm.controls.hazardLocation.valid && (hazardForm.controls.hazardLocation.dirty || submitAttempt)"></ion-input>
</ion-item>

The TypeScript:

choosePhoto()
{
    this.Camera.getPicture({
        quality: 50,
        destinationType: this.Camera.DestinationType.DATA_URL,
        encodingType: this.Camera.EncodingType.JPEG,
        sourceType: this.Camera.PictureSourceType.PHOTOLIBRARY,
        allowEdit: true
    }).then((ImageData) => {
        // console.log(ImageData);
        this.base64Img = ImageData;
        this.hazardForm.patchValue({
            hazardImage: this.base64Img
        });
    }, (err) => {
        console.log(err);
    })
}

I don't understand why the Go Button is opening the function for choosing a photo

Posts: 1

Participants: 1

Read full topic