I have a 3 p-dropdown components that are shown or hidden based on what tab the user is on in a modal. When the component loads, 3 api calls are made to the 3 endpoints that supply the entries for the 3 dropdowns and those objects are stored in 3 lists. The html looks like this:
<p-dropdown
*ngIf="activeTabIndex === 0"
[style]="{'z-index': '9999', 'width': '430px'}"
name="skillId"
id="skillId"
placeholder="Skill Requirement"
[filter]="true"
optionLabel="label"
[options]="skillsVocab"
[(ngModel)]="selectedCapability"
></p-dropdown>
...two more dropdowns with activeTabIndex 1 and 2...
I know the api calls and the tab index variable is working, because I put in console logs that are showing the expected outputs of 0
and a list of objects that populate the dropdown. I have other dropdowns in the project that still work just fine and are set up similarly, the main difference here is the use of ngIf. This dropdown worked just fine in primeng 9 and didn’t start having an issue until the upgrade to 10, but I don’t see anything in the 10 changelog that would indicate the need to change how the options are written. When clicking the dropdown, the component flashes for a single frame like it’s trying to load but nothing appears. There are no errors in the console.