Skip PrimenNG p-dropdown element when press tab key

Question

p-dropdown generally works the way I want, but when pressing the tab key on the page, it skips the dropdowns and selects the next element. (PrimeNG version 8 is used in the project)

I searched PrimeNG documentation and tried changing the tabindex but no result.

component.html

  <div class="form-group-wrapper">
    <div class="form-row">
      <div class="form-group">
        <label>
          Firmenname/Firmenwortlaut
        </label>
        <div class="input-wrapper">
          <input pInputText name="step1_name" formControlName="name" placeholder="Firmenname/Firmenwortlaut eingeben" (blur)="onBlur('name')" />
          <small class="error-message">{{errors.name}}</small>
        </div>
      </div>

    </div>
    <div class="form-row">
      <div class="form-group w50">
        <label>
          Gesellschaftsform
        </label>
        <div class="input-wrapper">
          <p-dropdown  id="dropdown1"name="step1_legalForm" [options]="legalFormArray" formControlName="legalForm"
            required="required" placeholder="Gesellschaftsform wählen" optionLabel="description" dataKey="code"
            [showClear]="false" (blur)="onBlur('legalForm')"></p-dropdown>
        </div>
      </div>
      <div class="form-group w50">
        <label>
          Firmenbuchnummer
        </label>
        <div class="input-wrapper">
          <input pInputText name="step1_companyRegistrationNumber" formControlName="companyRegistrationNumber"
            required="required" placeholder="Firmenbuchnummer eingeben" (blur)="onBlur('companyRegistrationNumber')"/>
          <small class="error-message">{{errors.companyRegistrationNumber}}</small>
        </div>
      </div>
    </div>

    <div class="form-row">

      <div class="form-group w50">
        <label>
          LEI (optional)
        </label>
        <div class="input-wrapper">
          <input pInputText name="step1_lei" formControlName="lei" placeholder="LEI eingeben" (blur)="onBlur('lei')" />
          <small class="error-message">{{errors.lei}}</small>
        </div>
      </div>
      <div class="form-group w50">
        <label>
          UID (optional)
        </label>
        <div class="input-wrapper">
          <input pInputText name="step1_uids" formControlName="vat" placeholder="UID eingeben" (blur)="onBlur('vat')"/>
          <small class="error-message">{{errors.vat}}</small>
        </div>
      </div>
    </div>
    <div class="form-row">
      <div class="form-group w50">
        <label>
          Straße
        </label>
        <div class="input-wrapper">
          <input pInputText name="step1_street" formControlName="street" required="required"
            placeholder="Straße eingeben" (blur)="onBlur('street')" />
          <small class="error-message">{{errors.street}}</small>
        </div>
      </div>
      <div class="form-group w50">
        <label>
          Hausnummer
        </label>
        <div class="input-wrapper">
          <input pInputText name="step1_housenumber" formControlName="houseNumber" required="required"
            placeholder="Hausnummer eingeben" (blur)="onBlur('houseNumber')" />
          <small class="error-message">{{errors.houseNumber}}</small>
        </div>
      </div>
    </div>

    <div class="form-row">
      <div class="form-group w50">
        <label>
          PLZ
        </label>
        <div class="input-wrapper">
          <input pInputText name="step1_zip" formControlName="zip" required="required" placeholder="PLZ eingeben"
            pKeyFilter="pint" (blur)="onBlur('zip')" />
          <small class="error-message">{{errors.zip}}</small>
        </div>
      </div>
      <div class="form-group w50">
        <label>
          Ort
        </label>
        <div class="input-wrapper">
          <input pInputText name="step1_city" formControlName="city" required="required" placeholder="Ort eingeben" (blur)="onBlur('city')" />
          <small class="error-message">{{errors.city}}</small>
        </div>
      </div>
    </div>

    <div class="form-row">
      <div class="form-group w50">
        <label>
          Land
        </label>
        <div class="input-wrapper">
          <p-dropdown name="step1_country" [options]="countryFormOptions" formControlName="country" required="required"
            placeholder="Land auswählen" optionLabel="label" [showClear]="false" (blur)="onBlur('country')" (onChange)="onCountryChange($event)"></p-dropdown>
        </div>
      </div>
    </div>

    <div class="form-row">
      <div class="form-group w50">
        <label>
          E-Mail-Adresse
        </label>
        <div class="input-wrapper">
          <input #step1email pInputText name="step1_email" type="email" formControlName="email" required="required"
            placeholder="E-Mail-Adresse eingeben" (blur)="onBlur('email')"/>
          <small class="error-message">{{errors.email}}</small>
        </div>
      </div>
      <div class="form-group w50">
        <label>
          Telefonnummer
        </label>
        <div class="input-wrapper">
          <input pInputText name="step1_phone" formControlName="phone" required="required"
            placeholder="Telefonnummer eingeben" (blur)="onBlur('phone')"/>
          <small class="error-message">{{errors.phone}}</small>
        </div>
      </div>
    </div>

    <div class="form-row">
      <div class="form-group w50">
        <label>
          Web-Adresse (optional)
        </label>
        <div class="input-wrapper">
          <input pInputText name="step1_web" formControlName="www" placeholder="Web-Adresse eingeben" (blur)="onBlur('www')"/>
          <small class="error-message">{{errors.www}}</small>
        </div>
      </div>
    </div>


  </div>
  <div class="form-group-wrapper no-border-bottom">
    <div class="form-controls-wrapper">
      <div class="button-wrapper align-left">
        <p-button *ngIf="showBack" [label]="labelBack" (onClick)="back()" [disabled]="!companyForm.valid"></p-button>
      </div>
      <div class="button-wrapper align-right">
        <p-button [label]="labelNext" (onClick)="next()" [disabled]="!companyForm.valid"></p-button>
      </div>
    </div>
  </div>
</form>

component.ts

@Component({
  selector: 'app-company-form-component',
  templateUrl: './company-form-component.component.html',
  styleUrls: ['./company-form-component.component.scss']
})
export class CompanyFormComponentComponent implements OnInit, OnChanges {

  @Input()
  labelNext;

  @Input()
  labelBack;

  @Input()
  showBack;

  @Input()
  initialValue: NewCompany;

  @Input()
  schema: Schema;

  @Output()
  onNext = new EventEmitter<NewCompany>();

  @Output()
  onBack = new EventEmitter();

  companyForm: FormGroup;
  errors: any = {};

  legalFormArray: Array<Legalform>;
  countryFormOptions = countryOptions;

  private errorHandler: ErrorHandler;

  constructor(private fb: FormBuilder,
    private http: HttpClient) {
  }

  ngOnInit() {
    this.loadLegalFormsByCountry(this.initialValue.address.country);
  }

  ngOnChanges(changes: SimpleChanges): void {
    if (changes.schema.currentValue !== changes.schema.previousValue) {
      this.errorHandler = new ErrorHandler();
      this.companyForm = this.initializeForm(this.initialValue, this.schema || Schema.empty());
      this.errorHandler.handleErrors(this.companyForm, this.errors);
    }
  }

  next() {
    if (this.companyForm.valid) {
      this.onNext.emit(toNewCompany(this.companyForm.value));
    }
  }

  back() {
    this.onBack.emit();
  }

  private initializeForm(newCompany: NewCompany, formSchema: Schema) {
    return this.fb.group({
      name: [newCompany.name, formSchema.get('company.name')],
      legalForm: [newCompany.legalForm, formSchema.get('company.legalForm')],
      companyRegistrationNumber: [newCompany.companyRegistrationNumber, [...formSchema.get('company.companyRegistrationNumber'), this.firmenbuchnummerByCountryValidator()]],
      lei: [newCompany.lei, formSchema.get('company.lei')],
      vat: [newCompany.vat, [...formSchema.get('company.vat'), this.uidByCountryValidator()]],
      street: [newCompany.address.street, formSchema.get('company.address.street')],
      houseNumber: [newCompany.address.houseNumber, formSchema.get('company.address.houseNumber')],
      zip: [newCompany.address.zip, [...formSchema.get('company.address.zip'), this.zipByCountryValidator()]],
      city: [newCompany.address.city, formSchema.get('company.address.city')],
      country: [toOption(countryOptions, newCompany.address.country), formSchema.get('company.address.country')],
      email: [newCompany.email, formSchema.get('company.email')],
      phone: [newCompany.phone, formSchema.get('company.phone')],
      www: [newCompany.www, formSchema.get('company.www')],
    });
  }

  firmenbuchnummerByCountryValidator(): ValidatorFn {
    return (formControl: AbstractControl) => {
      if (!formControl.parent) {
        return null;
      }
      const countryCode = formControl.parent.get('country').value.code;
      const regExp = getRegExpForCompanyRegistrationNumberByCountry(countryCode);

      return Validators.pattern(regExp)(formControl);
    };
  }

  uidByCountryValidator(): ValidatorFn {
    return (formControl: AbstractControl) => {
      if (!formControl.parent) {
        return null;
      }
      const countryCode = formControl.parent.get('country').value.code;
      const regExp = getRegexForUidByCountry(countryCode);
      return Validators.pattern(regExp)(formControl);
    };
  }

  zipByCountryValidator(): ValidatorFn {
    return (formControl: AbstractControl) => {
      if (!formControl.parent) {
        return null;
      }
      const countryCode = formControl.parent.get('country').value.code;
      const regExp = getRegexForZipByCountry(countryCode);
      return Validators.pattern(regExp)(formControl);
    };
  }

  loadLegalFormsByCountry(country: string) {
    this.http.get<Array<Legalform>>(`/api/masterdata/legalforms/${country}`)
      .subscribe((data) => {
        this.legalFormArray = data;
        this.companyForm.get('companyRegistrationNumber').updateValueAndValidity();
      },
        error => {
          console.log(error);
        });
  }

  onCountryChange(event) {
    const countryCode = event.value.code;
    this.loadLegalFormsByCountry(countryCode);
  }

  onBlur(controlName: string) {
    this.errorHandler.validateControl(controlName);
  }
}

and component.scss

#dropdown1{
  border: 2px solid darkblue;
}

looks like this:

Thank you in advance!