Unable to select a value in p-dropdown form PrimeNG (not visible)

After two days of searching, after opening a stackoverflow post and after asking it in the Cypress chat, I decided to open an issue. Cypress is working fine on my Angular project, only on my dropdowns I have an issue. I’m unable to select a value.

Current behavior:

HTML CODE:

    <span class="eco-form-component__control">
            <p-dropdown formControlName="provenanceCountry"
                        [options]="countries"
                        [style]="{'width':'100%'}">
            </p-dropdown>
          </span>

Exact HTML:

<div _ngcontent-c11="" class="eco-form-component"><label _ngcontent-c11="" class="eco-form-component__label" ng-reflect-ng-class="eco-form-component__label"> Geïmporteerd uit </label><span _ngcontent-c11="" class="eco-form-component__control"><p-dropdown _ngcontent-c11="" formcontrolname="provenanceCountry" class="ng-tns-c14-7 ui-inputwrapper-filled ng-untouched ng-pristine ng-invalid" ng-reflect-style="[object Object]" ng-reflect-options="[object Object],[object Object" ng-reflect-name="provenanceCountry"><div class="ng-tns-c14-7 ui-dropdown ui-widget ui-state-default ui-corner-all ui-helper-clearfix" ng-reflect-ng-class="[object Object]" ng-reflect-ng-style="[object Object]" style="width: 100%;"><!--bindings={
  "ng-reflect-ng-if": "true"
}--><div class="ui-helper-hidden-accessible ng-tns-c14-7 ng-star-inserted"><select class="ng-tns-c14-7" aria-hidden="true" tabindex="-1" aria-label=" "><!--bindings={}--><!--bindings={}--><!--bindings={
  "ng-reflect-ng-if": "true"
}--><!----><!--bindings={
  "ng-reflect-ng-for-of": "[object Object],[object Object"
}--><option class="ng-tns-c14-7 ng-star-inserted" value=" "> </option><option class="ng-tns-c14-7 ng-star-inserted" value="BELGIUM">BELGIUM</option><option class="ng-tns-c14-7 ng-star-inserted" value="FRANCE">FRANCE</option><!----></select></div><div class="ui-helper-hidden-accessible"><input class="ng-tns-c14-7" readonly="" role="listbox" type="text" aria-label=" "></div><!--bindings={
  "ng-reflect-ng-if": "true"
}--><label class="ng-tns-c14-7 ui-dropdown-label ui-inputtext ui-corner-all ng-star-inserted" ng-reflect-ng-class="[object Object]"><!--bindings={
  "ng-reflect-ng-if": "true"
}--><!----> <!--bindings={
  "ng-reflect-ng-template-outlet-context": "[object Object]"
}--></label><!--bindings={
  "ng-reflect-ng-if": "false"
}--><!--bindings={}--><!--bindings={}--><div class="ui-dropdown-trigger ui-state-default ui-corner-right"><span class="ui-dropdown-trigger-icon ui-clickable pi pi-caret-down" ng-reflect-klass="ui-dropdown-trigger-icon ui-cl" ng-reflect-ng-class="pi pi-caret-down"></span></div><!--bindings={}--></div></p-dropdown></span><!--bindings={
  "ng-reflect-ng-if": "false"
}--></div>

typescript:

countries: any[];
this.countries = ([{label: ' ', value: ' '}, {label: 'Belgium', value: 'Belgium'}, {label: 'France', value: 'France'}]);

CYPRESS:

When I use these methods below, I get an error or I get the default value selected. On of my dropdowns:

Cypress methods that doesn’t work:

cy.get('select').select('FR').should('have.value', 'FR')

Error:

> CypressError: Timed out retrying: cy.select() failed because this element is not visible:
> <select class="ng-tns-c16-2" aria-hidden="true" tabindex="-1" aria-label="Nederlands">...</select>
> This element '' is not visible because its content is being clipped by one of its parent elements, which has a CSS property of overflow: 'hidden', 'scroll' or 'auto'

When using {force: true} I won’t get an error, but it’s not working either.

Not working:

cy.get('select').select('FR',{force:true}).should('have.value', 'FR')

Not working:

cy.get('option').eq(2).click({force: true});

Not working:

cy.get('p-dropdown[formControlName="provenanceCountry"]').click();
    cy.get('p-dropdown[formControlName="provenanceCountry"]').get('select').then(option => {
      cy.wrap(option).get('p-dropdown[formControlName="provenanceCountry"]').contains('FRANCE').click();
    });

Error: 
> CypressError: Timed out retrying: cy.click() failed because this element is not visible:
>  <option class="ng-tns-c9-15 ng-star-inserted" value="[object
>  Object]">FRANCE</option>
> This element '<option.ng-tns-c9-15.ng-star-inserted>' is not visible because it has an effective width and height of: '0 x 0' pixels.
> Fix this problem, or use {force: true} to disable error checking.
> https://on.cypress.io/element-cannot-be-interacted-with

When I use {force: true} in my click, the error is just not shown.

Not working:

 cy.get('p-dropdown[formControlName="provenanceCountry"]').click();
 cy.get('[formcontrolname="provenanceCountry"]').find('select').select('FRANCE');

Desired behavior:

Select a value in my dropdown (not the default).

Versions

I’m using windows 7, google chrome