Solution found: CKEditor blur event is fired after p:commandButton action

Community Driven Extensions Project
Post Reply
lastresort
Posts: 18
Joined: 07 Nov 2016, 11:14

01 Nov 2017, 17:10

We're using a unusual way to submit data in our applicaton. Each field is processed via ajax after it's blur event and the commandButton doesn't process anyhting beside itself and calls an action method.

That works without problems with the normal primefaces components, but if you edit some text in a pe:ckEditor and click on the commandButton directly the action of the button is fired before the blur event of the ckEditor, so the changes aren't avaiable in the action method of the bean.

that's how our html looks like:

Code: Select all

<p:inputText value="#{Bean.inputText}">
<p:ajax process="@this" /> // correctly fired before commandButton action
</p:inputText>

<pe:ckEditor	value="#{ Bean.editorText }">
<p:ajax event="blur" process="@this" update="@none"/> // fired after commandButton action for some reason
</pe:ckEditor>

<p:commandButton action="#{ Bean.action() }" process="@this" />
bean:

Code: Select all

public String inputText;
public String editorText;

public void action () {
	System.out.println(inputText); // works correctly: new value is printed if you change the text in your inputText and then click on the button directly
	System.out.println(editorText); // wrong behaviour: old value is printed if you change the text in your editor and then click on the button directly
}

In my opinion that's a bug. If not is there any way to fire the blur event before the action?
Last edited by lastresort on 02 Nov 2017, 10:03, edited 2 times in total.
PF Elite 8.0.1 + PF Extensions 8.0.2 + MyFaces 2.3-next-M2 @ Quarkus 1.4.2.Final

Melloware
Posts: 3716
Joined: 22 Apr 2013, 15:48

01 Nov 2017, 17:56

Let me try and reproduce but you are right this seems like a bug.
PrimeFaces Developer | PrimeFaces Extensions Developer
GitHub Profile: https://github.com/melloware
PrimeFaces Elite 13.0.0 / PF Extensions 13.0.0
PrimeReact 9.6.1

Melloware
Posts: 3716
Joined: 22 Apr 2013, 15:48

01 Nov 2017, 18:45

I have confirmed its an issue can you please create an issue on our GitHub: https://github.com/primefaces-extension ... com/issues
PrimeFaces Developer | PrimeFaces Extensions Developer
GitHub Profile: https://github.com/melloware
PrimeFaces Elite 13.0.0 / PF Extensions 13.0.0
PrimeReact 9.6.1

Melloware
Posts: 3716
Joined: 22 Apr 2013, 15:48

01 Nov 2017, 18:56

I wonder if this is actually just the way "blur" of the CKEditor works because we are attaching to the blur event. But it definitely fires after the command button is clicked.
PrimeFaces Developer | PrimeFaces Extensions Developer
GitHub Profile: https://github.com/melloware
PrimeFaces Elite 13.0.0 / PF Extensions 13.0.0
PrimeReact 9.6.1

lastresort
Posts: 18
Joined: 07 Nov 2016, 11:14

01 Nov 2017, 20:23

I've created an issue on github: https://github.com/primefaces-extension ... issues/501

/edit: Just found this: https://ckeditor.com/old/forums/CKEdito ... the-editor

They have a delay of 200 ms in the blur event because the focus event is async and causes problem if the blur event doesn't have a delay.

The developer said they'll try to find a solution in 2013, but there's no update on this so far.


Maybe you can't fix this bug then.
PF Elite 8.0.1 + PF Extensions 8.0.2 + MyFaces 2.3-next-M2 @ Quarkus 1.4.2.Final

Melloware
Posts: 3716
Joined: 22 Apr 2013, 15:48

01 Nov 2017, 21:47

Just add this in your JS somewhere on your page...

Code: Select all

CKEDITOR.focusManager._.blurDelay = 0;
PrimeFaces Developer | PrimeFaces Extensions Developer
GitHub Profile: https://github.com/melloware
PrimeFaces Elite 13.0.0 / PF Extensions 13.0.0
PrimeReact 9.6.1

lastresort
Posts: 18
Joined: 07 Nov 2016, 11:14

02 Nov 2017, 09:58

Now it behaves like it should, thanks. If our tester will find any negative effects caused by this setting I'll post it here.
PF Elite 8.0.1 + PF Extensions 8.0.2 + MyFaces 2.3-next-M2 @ Quarkus 1.4.2.Final

Melloware
Posts: 3716
Joined: 22 Apr 2013, 15:48

02 Nov 2017, 13:01

Awesome thanks for reporting and testing!
PrimeFaces Developer | PrimeFaces Extensions Developer
GitHub Profile: https://github.com/melloware
PrimeFaces Elite 13.0.0 / PF Extensions 13.0.0
PrimeReact 9.6.1

Post Reply

Return to “Extensions”

  • Information
  • Who is online

    Users browsing this forum: No registered users and 6 guests