Primeng: p-calendar closes when clicking previous or next month from within editable table cell

[waustinlynn]

I'm submitting a ... (check one with "x")

[x ] bug report => Search github for a similar issue or PR before submitting
[ ] feature request => Please check if request is not on the roadmap already https://github.com/primefaces/primeng/wiki/Roadmap
[ ] support request => Please do not submit support request here, instead see http://forum.primefaces.org/viewforum.php?f=35

Plunkr Case (Bug Reports)
https://stackblitz.com/edit/primeng7-calendar-check

Current behavior
p-calendar closes when clicking the previous or next month buttons when in a editable cell within a turbo table.

Expected behavior
Ability to navigate to different months without the calendar dialog closing.

Minimal reproduction of the problem with instructions
https://stackblitz.com/edit/primeng7-calendar-check

Basic instructions and steps to reproduce are outlined within the stackblitz link. In summary, a basic input is shown with p-calendar working as expected, however the p-calendar within an editable table cell closes as soon as a month is clicked.

What is the motivation / use case for changing the behavior?
This was working prior to major version 7 and I verified that it does work in 6.1.7 today by downgrading our project.

Please tell us about your environment:
Win10, VS Code

• Angular version:
  7.2.8

• PrimeNG version:
  7.1.0

• Browser: [all | Chrome XX | Firefox XX | IE XX | Safari XX | Mobile Chrome XX | Android X.X Web Browser | iOS XX Safari | iOS XX UIWebView | iOS XX WKWebView ]
  Chrome 73.0.3683.75, IE 11

• Language: [all | TypeScript X.X | ES6/7 | ES5]
  Typescript 3.2.4

• Node (for AoT issues): node --version = 10.15.3

[theojinchiu]

I found this issue happening in Android Chrome device even if the p-calendar is not within turbo table editable cell. Issue can be reproduced in official site.

1. Select Date
2. Try to Change date by navigating to the month prior or after
3. Calendar closes

We also downgrade our version to 6.1.4 and it's working normally

[dmoore1181]

I am having this same issue within a reactive form on Angular 7.2.13 and primeng 7.1.1. The inputs that I am providing are id, monthNavigator, yearNavigator, yearRange, and formControlName

[StephenABoyd]

Downgrading to 6.1.4 like @theojinchiu mentioned did the trick. The highest version I didn't have this issue in was 6.1.7

[vanroda]

Any news on this ?

[theojinchiu]

It seems like the issue is fixed with version 7.1.1, I tested it on the official site. Can you guys confirm with your case also?

[dmoore1181]

@theojinchiu 7.1.1 is the version that I am having issues with.

[dmoore1181]

@theojinchiu, I may have been wrong in my last comment, I am still having the problem in my code, but not if I run a fork of the main branch on here. I am attempting to find out why that is now.

[vanroda]

Fwiw, when tested on an empty component I can only reproduce this issue with version 7.1.1
<p-calendar [(ngModel)]="date3" [showIcon]="true"></p-calendar>
Reverted back to 7.1.0 for now

[rogiermulders]

I'm on primereact 3.1.2 and have exactly the same issue (used as datepicker from table cell).
Downgrade to 3.1.1 did not help.

[smitpsanghavi]

Looks like this issue is fixed in #7566 and will be released in 7.1.2

[sabrina-stangler]

I was having this problem with a p-calendar in a drawer. Figured out that it was registering the month changing clicks as "outside of the drawer" which then closed the drawer.

Fixed it by adding additional logic to the onCancel method (that got called when a click "outside of the drawer" was registered) to have the event passed in as optional so these clicks outside of drawer passed no event and the drawer didn't close if it had nothing passed

[mrm4gic]

Issue persits in 7.1.3. having p-calendar within a turbotable cell causes the overlay to close upon switching months:

{{txtRefTo}}

appendTo="body"
dateFormat="{{dateFormat}}"
[disabledDates]="invalidDates"
[locale]="calendarLocale"
[(ngModel)]="refTo"
readonlyInput="true"
showButtonBar="true"
(onFocus)="loadInvalidDates(refTo.getFullYear())"
(onSelect)="handleReportsEdited()"
(onMonthChange)="loadInvalidDates($event.year)">


{{refTo | date:'dd.MM.yyyy'}}

[thiagogjt]

I suggested a sollution on #7384

[sbkt007]

I was having this problem with a p-calendar in a drawer. Figured out that it was registering the month changing clicks as "outside of the drawer" which then closed the drawer.

Fixed it by adding additional logic to the onCancel method (that got called when a click "outside of the drawer" was registered) to have the event passed in as optional so these clicks outside of drawer passed no event and the drawer didn't close if it had nothing passed

Can share the code

[sbkt007]

It seems like the issue is fixed with version 7.1.1, I tested it on the official site. Can you guys confirm with your case also?

It's not being fixed. still, I am facing the issue

[domessina]

I found the solution: you need to use a stop click propagation system. I created a directive:

import {Directive, HostListener} from "@angular/core";

@Directive({
  selector: "[stop-click-propagation]"
})
export class StopClickPropagationDirective {
  @HostListener("click", ["$event"])
  public onClick(event: any): void {
    event.stopPropagation();
  }

  @HostListener("mousedown", ["$event"])
  public onMousedown(event: any): void {
    event.stopPropagation();
  }
}

Use it like this

<p-calendar
          stop-click-propagation
          [(ngModel)]="dateToEncode"
          [dateFormat]="'dd/mm/yy'"
          [locale]="fr"
          [showButtonBar]="true"
          [showIcon]="true"
          [style]="{'width':'100%'}"></p-calendar>

[mertsincan]

Hi @rogiermulders,

I'm on primereact 3.1.2 and have exactly the same issue (used as datepicker from table cell).
Downgrade to 3.1.1 did not help.

Could you please create an issue in PrimeReact Github?

Best Regards,

[skota1976]

I was having this problem with a p-calendar in a drawer. Figured out that it was registering the month changing clicks as "outside of the drawer" which then closed the drawer.

Fixed it by adding additional logic to the onCancel method (that got called when a click "outside of the drawer" was registered) to have the event passed in as optional so these clicks outside of drawer passed no event and the drawer didn't close if it had nothing passed

I am facing the same issue, Could you please provide the code snippet.

[sabrina-stangler]

I was having this problem with a p-calendar in a drawer. Figured out that it was registering the month changing clicks as "outside of the drawer" which then closed the drawer.
Fixed it by adding additional logic to the onCancel method (that got called when a click "outside of the drawer" was registered) to have the event passed in as optional so these clicks outside of drawer passed no event and the drawer didn't close if it had nothing passed

I am facing the same issue, Could you please provide the code snippet.

Alas, I cannot. I no longer have access to the codebase in question, and my memory remains unfortunately average.

Good luck!

[ruipimentel]

I found the solution: you need to use a stop click propagation system. I created a directive:

import {Directive, HostListener} from "@angular/core";

@Directive({
  selector: "[stop-click-propagation]"
})
export class StopClickPropagationDirective {
  @HostListener("click", ["$event"])
  public onClick(event: any): void {
    event.stopPropagation();
  }

  @HostListener("mousedown", ["$event"])
  public onMousedown(event: any): void {
    event.stopPropagation();
  }
}

Use it like this

<p-calendar
          stop-click-propagation
          [(ngModel)]="dateToEncode"
          [dateFormat]="'dd/mm/yy'"
          [locale]="fr"
          [showButtonBar]="true"
          [showIcon]="true"
          [style]="{'width':'100%'}"></p-calendar>

To combine this technique with the solution for the problem described on issue https://github.com/primefaces/primeng/issues/1818, one will have to use the following template:

<!-- Apply stop-click-propagation here to solve the click propagation bug: -->
<div
  #calendarWrapper
  stop-click-propagation
>
</div>
<p-table
  [value]="cars"
  editMode="row"
  dataKey="identifier"
>
  <!-- ... -->
  <ng-template pTemplate="body" let-car let-editing="editing">
    <!-- ... -->
      <td pEditableColumn>
        <p-cellEditor>
          <ng-template pTemplate="input">
            <!-- Add [appendTo] to solve the CSS conflict with p-table: -->
            <p-calendar
              [(ngModel)]="car.manufacturingDate"
              [appendTo]="calendarWrapper"
            >
            </p-calendar>
          </ng-template>
          <ng-template pTemplate="output">
            {{car.manufacturingDate}}
          </ng-template>
        </p-cellEditor>
      </td>
    <!-- ... -->
  </ng-template>
</p-table>