Primeng: Overlay components breaks when used in p-cellEditor

[thiagogjt]

If you have a PrimeNG PRO Support subscription please post your issue at;

https://pro.primefaces.org

where our team will respond within 4 business hours.

If you do not have a PrimeNG PRO Support subscription, fill-in the report below. Please note that
your issue will be added to the waiting list of community issues and will be reviewed on a first-come first-serve basis, as a result, the support team is unable to guarantee a specific schedule on when it will be reviewed. Thank you for your understanding.

Current Waiting Time: ~8 weeks.

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)
Please demonstrate your case at stackblitz by using the issue template below. Issues without a test case have much less possibility to be reviewd in detail and assisted.

https://stackblitz.com/edit/github-qnfqq9

Current behavior

When user clicks on calendar to select the time value, the component is closed.

Expected behavior

The component must stay on screen until user clicks outside de overlay

Minimal reproduction of the problem with instructions

• Cllick on the cell to edit.
• Try to select a time value

What is the motivation / use case for changing the behavior?

Angular version: 7.X

PrimeNG version: 7.X

• 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 ]
  

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

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

[thiagogjt]

Sorry in advance for the poor english!
After do some debug i have located the source of the problem.
The table component binds to document click event to verify the editing state:

https://github.com/primefaces/primeng/blob/7964c937cb1d55d9bcadfb21285f21fe9c7959d5/src/app/components/table/table.ts#L1518

I suggest that the component have an property to configure what component must have the click event binded.

@Input() ref: any;

...

bindDocumentEditListener() {
    if (!this.documentEditListener) {
      this.documentEditListener = event => {
        if (this.editingCell && !this.editingCellClick && this.isEditingCellValid()) {
          DomHandler.removeClass(this.editingCell, 'ui-editing-cell');
          this.editingCell = null;
          this.unbindDocumentEditListener();
        }

        this.editingCellClick = false;
      };

      this.ref.addEventListener('click', this.documentEditListener);
    }
  }

  unbindDocumentEditListener() {
    if (this.documentEditListener) {
      this.ref.removeEventListener('click', this.documentEditListener);
      this.documentEditListener = null;
    }
  }

[thiagogjt]

Another way is to test if the event cames from an overlay trigger:

...

 isFromOverlayTrigger(event) {
    return event.path.some(path => path.className && path.className.includes('ng-trigger-overlayAnimation'));
  }

bindDocumentEditListener() {
    if (!this.documentEditListener) {
      this.documentEditListener = event => {
        if (!this.isFromOverlayTrigger(event) && this.editingCell && !this.editingCellClick && this.isEditingCellValid()) {
          DomHandler.removeClass(this.editingCell, 'ui-editing-cell');
          this.editingCell = null;
          this.unbindDocumentEditListener();
        }

        this.editingCellClick = false;
      };

      document.addEventListener('click', this.documentEditListener);
    }
  }
...

[cagataycivici]

Unable to replicate with PrimeNG 9, if the issue persists please create a new ticket with a test case reproducing the issue e.g. stackblitz or a github repo and it will be reviewed by our team once again.

[dcanning]

not being able to replicate in 9 doesn't mean it's working in 7 or 8. It's clearly broken in the plunkr submitted: https://stackblitz.com/edit/github-qnfqq9
Also broken is being able to pick start and end for a p-calendar with selectionMode="range". Once you pick the first date the calendar closes

[mikimaine]

This issue still exists, Calendar is unusable inside p-cellEditor

[InfoCharlesM]

Still having the same issue