In form background color changes when using tab key

In my app I have a simple form that looks like this

But when I start using the tab key to move to the next field the background color changes so it looks like this

What could I have done wrong ? My html looks like this, I hove no styling except for error messages

<ion-row>
  <ion-col>
    <ion-card>
      <ion-item>
        <form [formGroup]="feedbackForm" (ngSubmit)="sendFeedback()" novalidate>
          <ion-label position="stacked">Email</ion-label>
          <ion-input type="email" formControlName="from" placeholder="Indtast din email adresse"></ion-input>
          <span class="error ion-padding" *ngIf="isSubmitted && errorControl.from.errors?.required">
            Indtast din email
          </span>
          <div formArrayName="races" *ngFor="let race of races.controls; let i=index">
            <div [formGroupName]="i" class="ion-padding-start border-bottom">
              <ion-label class="" position="stacked">Arrangør</ion-label>
              <ion-input formControlName="category" placeholder="Løbs/event arrangør"></ion-input>
              <span class="error ion-padding" *ngIf="isSubmitted && errorControlRaces('category', i)">Udfyld arrangør</span>
              <ion-label position="stacked">Løb/event</ion-label>
              <ion-input formControlName="event" placeholder="Løbs/event navn"></ion-input>
              <span class="error ion-padding" *ngIf="isSubmitted && errorControlRaces('event', i)">Udfyld løbs/event navn</span>
              <ion-label position="stacked">Dato</ion-label>
              <ion-input formControlName="date" placeholder="Dato løbet blev afholdt"></ion-input>
              <span class="error ion-padding" *ngIf="isSubmitted && errorControlRaces('date', i)">Udfyld dato løb/event blev afholdt</span>
              <ion-label position="stacked">Link</ion-label>
              <ion-input formControlName="link" placeholder="Link til billedalbum"></ion-input>
              <span class="error ion-padding" *ngIf="isSubmitted && errorControlRaces('link', i)">Udfyld link til album</span>
              <ion-label position="stacked">Fotograf</ion-label>
              <ion-input formControlName="fotograf" placeholder="Fotografens navn"></ion-input>
              <span class="error ion-padding" *ngIf="isSubmitted && errorControlRaces('fotograf', i)">Udfyld fotograf</span>
            </div>
          </div>
          <ion-item>
            <ion-buttons slot="end">
              <ion-button color="secondary" (click)="addRace()">Tilføj et link </ion-button>
            </ion-buttons>
          </ion-item>
          <ion-item>
            <ion-button (click)="cancelSendFeedback()" color="warning" expand="block">Cancel</ion-button>
            <ion-button type="submit" color="primary" expand="block">Send </ion-button>
          </ion-item>
        </form>
      </ion-item>
    </ion-card>
  </ion-col>
</ion-row>

3 posts - 2 participants

Read full topic