Primeng: Focus and Blur events for Editor

[immayank26]

I'm submitting a feature request for onFocus and onBlur events for primeng editor (check one with "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 fork the plunkr below and create a case demonstrating your bug report. Issues without a plunkr have much less possibility to be reviewed.

http://plnkr.co/edit/VZbdZfQ7SuTV87tTkbYR?p=preview

This issue has not been reported yet.

Current behavior
The current primeng editor does not support focus and blur events.
Reference: https://forum.primefaces.org/viewtopic.php?f=35&t=51304&sid=b3e4042540bcfb40f90a36d7d0038a7f

Expected behavior
like (click) event, if we can support the (focus) and (blur events)

Minimal reproduction of the problem with instructions

What is the motivation / use case for changing the behavior?
javascript supports blur and focus events and many other rich text editors support all the event listeners like click, focus, blur etc. These events can help in creating a much more responsive angular application with the use of primeng editor.

Please tell us about your environment:

• Angular version: 2.0.X
  4.1.3

• PrimeNG version: 2.0.X
  4.0.3

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

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

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

[supriyaraj03]

I would also like to have this feature inplace and I see that its not something very difficult as it is already implemented in onTextChange.

Could you please let us know if it will implemented ?

[leonetosoft]

This is very necessary!

Users are accustomed to Excell behavior.
That way it's very strange, you click edit the field, click on another field, the old one continues with the value you entered, but the editComplete was not fired ...

[ethanmassie]

In case anyone sees this in the future I have a work around for this missing feature. You can wrap the p-editor in a contenteditable div which will give you access to blur and focus events. For chrome you need to add contenteditable="false" to the spans in your p-header so the cursor wont jump to the start whenever the user selects a button inside the header.

Here's an example:

<div contenteditable="false" (blur)="onBlur()" (focus)="onFocus()">
  <p-editor>
    <p-header>
      <span class="ql-formats" contenteditable="false">
        <button class="ql-bold" aria-label="Bold"></button>
        <button class="ql-italic" aria-label="Italic"></button>
        <button class="ql-underline" aria-label="Underline"></button>
        <button class="ql-strike" aria-label="Strikethrough"></button>
      </span>
    </p-header>
  </p-editor>
</div>

[bweitjensES]

This workaround didn't work for my, but I found a workaround mentioned in the quill editor (https://github.com/quilljs/quill/issues/2186#issuecomment-533401328) that I got to work:

export class MyComponent extends implements AfterViewInit{
  @ViewChild('pEditor')
  public editor: Editor;

  ngAfterViewInit() {
    this.editor.getQuill().editor.scroll.domNode.addEventListener('focus', this.onFocus.bind(this));
    this.editor.getQuill().editor.scroll.domNode.addEventListener('blur', this.onBlur.bind(this));
  }

  onFocus(): void {
  }

  onBlur(): void {
  }
}