DatePicker: "Cannot read properties of null" error when clicking on next/previous month button (18.0.0-beta.3)

[flortsch]

Describe the bug

client:489 [vite] connecting...
client:608 [vite] connected.
core.mjs:30062 Angular is running in development mode.
zone.js:1201 [Violation] 'focus' handler took 302ms
zone.js:1201 [Violation] 'focus' handler took 258ms
zone.js:1201 [Violation] 'focus' handler took 253ms
zone.js:1201 [Violation] 'click' handler took 266ms
global-error-handler.ts:10 TypeError: Cannot read properties of null (reading 'focus')
    at _DatePicker.updateFocus (primeng-datepicker.mjs:3828:217)
    at primeng-datepicker.mjs:2527:47
    at _ZoneDelegate.invoke (zone.js:369:28)
    at Object.onInvoke (core.mjs:7041:25)
    at _ZoneDelegate.invoke (zone.js:368:34)
    at _ZoneImpl.run (zone.js:111:43)
    at zone.js:2538:40
    at _ZoneDelegate.invokeTask (zone.js:402:33)
    at core.mjs:6710:49
    at AsyncStackTaggingZoneSpec.onInvokeTask (core.mjs:6710:30)
handleError @ global-error-handler.ts:10
next @ core.mjs:33150
ConsumerObserver2.next @ Subscriber.js:90
Subscriber2._next @ Subscriber.js:59
Subscriber2.next @ Subscriber.js:32
(anonymous) @ Subject.js:41
errorContext @ errorContext.js:23
Subject2.next @ Subject.js:31
emit @ core.mjs:6583
(anonymous) @ core.mjs:7075
invoke @ zone.js:369
run @ zone.js:111
runOutsideAngular @ core.mjs:6937
onHandleError @ core.mjs:7075
handleError @ zone.js:373
runGuarded @ zone.js:124
api.microtaskDrainDone @ zone.js:2325
drainMicroTaskQueue @ zone.js:588
invokeTask @ zone.js:487
invokeTask @ zone.js:1138
globalCallback @ zone.js:1169
globalZoneAwareCallback @ zone.js:1202
Show 21 more frames
Show less
zone.js:1201 [Violation] 'click' handler took 289ms

Environment

<p-datePicker
        [dateFormat]="dateFormat"
        [ngClass]="{ 'opacity-50': readonly }"
        [showOnFocus]="!readonly"
        [id]="field.name"
        [formControlName]="field.name"
        [showIcon]="!readonly"
        [showButtonBar]="true"
        [readonlyInput]="true"
        [minDate]="minDate"
        [maxDate]="maxDate"
        dataType="string"
      >
</p-datePicker>

Reproducer

No response

Angular version

18.2.3

PrimeNG version

18.0.0-beta.3

Build / Runtime

Angular CLI App

Language

TypeScript

Node version (for AoT issues node --version)

18.20.4

Browser(s)

No response

Steps to reproduce the behavior

No response

Expected behavior

No response

[mplgn]

Continuation of #16436, which was closed and thought to be fixed for beta-3.

[jonbeech86]

I can confirm I am still getting this on beta-3.
I see its also happening on the docs too but not sure what version that is running, I assume beta-3: https://v18.primeng.org/datepicker

[Dayonel]

Hi, I can confirm this bug is still happening in beta-3 and also in your docs.

[Dayonel]

Error is gone if chevron buttons next & prev

have a css class p-datepicker-next instead of p-datepicker-next-button (notice -button)

or

js checks for '.p-datepicker-prev-button').focus() instead of '.p-datepicker-prev').focus() (notice -button)

Same for -next code.

[Dayonel]

This temporary solution fixes the bug:

        <p-datepicker formControlName="date" appendTo="body">

          <!-- TODO: Remove this on beta-4 -->
          <ng-template pTemplate="footer">
            <p-button class="p-datepicker-prev hidden">Previous</p-button>
            <p-button class="p-datepicker-next hidden">Next</p-button>
          </ng-template>
          <!-- end TODO -->

        </p-datepicker>

[Dayonel]

Fixed in PR: 16675

[mertsincan]

Fixed in #16675