Search code examples
angularprimengprimeng-dropdowns

Angular Primeng dropdown won't work after updating primeng to v.15


I'm working in an Angular project which uses Primeng.

After updating Primeng to version 15.1.0 the dropdown wasn't expandable anymore. When clicking on the element this error message is showing:

error message

It's only the dropdown that doesn't work, all other input elements like checkboxes and input fields work as expected.

How can I get the dropdown to expand on click?

How I'm using the dropdown:

<p-dropdown
    [(ngModel)]="item[col.field]"
    [options]="nodeTypeOptions"
    optionLabel="name"
    optionValue="nodeType"
    (onChange)="onItemChanged(item)"
    placeholder="Välj"
    appendTo="body"
    [style]="{ width: '100%' }"
></p-dropdown>

Here's my package.json:

{
  "name": "lalla",
  "version": "0.0.0",
  "license": "MIT",
  "scripts": {
    "ng": "nx",
    "postinstall": "node ./decorate-angular-cli.js && ngcc --properties es2020 browser module main",
    "start-api": "nx serve api",
    "start-dev": "nx serve lalla --proxy-config apps/lalla/proxy.conf.json",
    "build": "nx build",
    "test": "nx test",
    "test-coverage": "jest --coverage",
    "seed": "ts-node -r tsconfig-paths/register --project apps/api/tsconfig.app.json apps/api/src/seed.ts",
    "api-e2e": "jest --config ./apps/api/test/jest-e2e.json --forceExit"
  },
  "private": true,
  "dependencies": {
    "@angular/animations": "~15.1.1",
    "@angular/cdk": "^15.1.1",
    "@angular/common": "~15.1.1",
    "@angular/compiler": "~15.1.1",
    "@angular/core": "~15.1.1",
    "@angular/forms": "~15.1.1",
    "@angular/platform-browser": "~15.1.1",
    "@angular/platform-browser-dynamic": "~15.1.1",
    "@angular/router": "~15.1.1",
    "@auth0/angular-jwt": "^5.1.2",
    "@nestjs/class-transformer": "^0.4.0",
    "@nestjs/common": "^9.2.1",
    "@nestjs/config": "^2.2.0",
    "@nestjs/core": "^9.2.1",
    "@nestjs/jwt": "^10.0.1",
    "@nestjs/mapped-types": "^1.2.0",
    "@nestjs/passport": "^9.0.0",
    "@nestjs/platform-express": "^9.2.1",
    "@nestjs/typeorm": "^9.0.0",
    "@nrwl/angular": "15.5.2",
    "@types/uuid": "^9.0.0",
    "bcrypt": "^5.1.0",
    "bootstrap": "5.2.3",
    "class-validator": "^0.14.0",
    "guid-typescript": "^1.0.9",
    "passport": "^0.6.0",
    "passport-http-bearer": "^1.0.1",
    "passport-jwt": "^4.0.1",
    "pg": "^8.8.0",
    "primeflex": "^3.3.0",
    "primeicons": "^6.0.1",
    "primeng": "^15.1.0",
    "reflect-metadata": "^0.1.13",
    "rxjs": "~7.8.0",
    "tslib": "^2.4.1",
    "typeorm": "^0.3.11",
    "uuid": "^9.0.0",
    "xlsx": "^0.18.5",
    "zone.js": "~0.12.0"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "~15.1.2",
    "@angular-eslint/eslint-plugin": "~15.2.0",
    "@angular-eslint/eslint-plugin-template": "~15.2.0",
    "@angular-eslint/template-parser": "~15.2.0",
    "@angular/cli": "~15.1.2",
    "@angular/compiler-cli": "~15.1.1",
    "@angular/language-service": "~15.1.1",
    "@nestjs/schematics": "^9.0.4",
    "@nestjs/testing": "^9.2.1",
    "@nrwl/cli": "15.5.2",
    "@nrwl/cypress": "15.5.2",
    "@nrwl/eslint-plugin-nx": "15.5.2",
    "@nrwl/jest": "15.5.2",
    "@nrwl/linter": "15.5.2",
    "@nrwl/nest": "15.5.2",
    "@nrwl/node": "15.5.2",
    "@nrwl/workspace": "15.5.2",
    "@types/bcrypt": "^5.0.0",
    "@types/faker": "^6.6.9",
    "@types/jest": "29.2.6",
    "@types/node": "18.11.18",
    "@types/passport": "^1.0.11",
    "@types/passport-jwt": "^3.0.8",
    "@types/supertest": "^2.0.12",
    "@typescript-eslint/eslint-plugin": "~5.48.2",
    "@typescript-eslint/parser": "~5.48.2",
    "cypress": "^12.3.0",
    "dom-storage": "^2.1.0",
    "eslint": "~8.32.0",
    "eslint-config-prettier": "8.6.0",
    "eslint-plugin-cypress": "^2.10.3",
    "jest": "29.3.1",
    "jest-preset-angular": "~12.2.5",
    "ng-mocks": "^14.5.3",
    "nx": "15.5.2",
    "prettier": "^2.8.3",
    "supertest": "^6.3.3",
    "ts-jest": "29.0.5",
    "ts-node": "~10.9.1",
    "typescript": "~4.9.4"
  }
}

What I've tried:

Searched Github, stack overflow and all other webdeveloper forums for an answer, didn't find one. Debugged the code locally but there's no constructive feedback errormessage there. Tried to update primeng on stackblitz but to no prevail.

Expected to find a hint to where the culprit was.


Solution

  • Thanks to Chellappan வ I was able to find the answer.

    This was a bug in Primeng and was fixed in Primeng 15.1.1