Component: Datepicker v18. Layout after changing month

[mmattila2000]

Describe the bug

When using the datepicker component in PrimeNG v18. After you change a month in the datepicker, and close the datepicker, and open it again, the z-index is wrong and the calendar opens on top of the input. It should open below the input as in the first time the datepicker is opened.

Environment

The issue can be found in the demo site: https://v18.primeng.org/datepicker

Reproducer

https://v18.primeng.org/datepicker

Angular version

18.2.0

PrimeNG version

18.0.0-beta.1

Build / Runtime

Angular CLI App

Language

TypeScript

Node version (for AoT issues node --version)

20.17.0

Browser(s)

No response

Steps to reproduce the behavior

1. Go to https://v18.primeng.org/datepicker
2. Scroll to the first datepicker "Basic" demo.
3. Click the input to open the datepicker
4. Click the next or previous arrow to change the month.
5. Close the datepicker by selecting a date or clicking outside
6. Click the input again. The calendar is positioned incorrectly and goes under the black code example section.

Expected behavior

The calendar should open in the same position as the first time.

[civic9]

This issue is probably caused by wrong selector for next/prev buttons in updateFocus() in datepicker.ts:

-                if (this.navigationState.backward) DomHandler.findSingle(this.contentViewChild.nativeElement, '.p-datepicker-prev').focus();
-                else DomHandler.findSingle(this.contentViewChild.nativeElement, '.p-datepicker-next').focus();
+                if (this.navigationState.backward) DomHandler.findSingle(this.contentViewChild.nativeElement, '.p-datepicker-prev-button').focus();
+                else DomHandler.findSingle(this.contentViewChild.nativeElement, '.p-datepicker-next-button').focus();

[mplgn]

I've found that the z-index is missing after using month navigation. If I add the z-index back manually in the browser dev tools, the calendar renders correctly.

Before using month navigation:

After using month navigation:

[flortsch]

Getting the same error with 18.0.0-beta.2. Also, whenever I click into the input field, I get the following error output in my console:

Error: NgClass can only toggle CSS classes expressed as strings, got undefined

[cetincakiroglu]

Hi,

Thanks for testing the beta and reporting the issue I couldn't replicate it with the v18.0.0-beta.3 snapshot. It'll probably fixed within a refactoring between 2 weeks. Also, I can catch the error in website but I couldn't get mentioned error in beta.3 snapshot. Fix will be available with 18.0.0-beta.3 release today. Could you please check and open a new issue if it still exists.

For now, I'm closing this one to document it as fixed in the changelog.