focus is not set to yes-button in modal dialog

[hgfrey]

Since PF 13.0.6, setting the focus with the 'focus' attribute in the 'dialog' no longer works. The element briefly gains focus and then immediately loses it again. This still worked in PF 13.0.5.

Is this known? Should I open an issue for this?

[hgfrey]

Since PF 13.0.6 active element jumps back to the link I have clicked.

[melloware]

Its working fine for me:
discussion-1744.zip

Run mvn clean jetty:run and navigate to http://localhost:8080/

When you open the dialog the "Yes" button is focus and when you close the dialog it returns focus back to the original calling button "Show".

[hgfrey]

I will try to build a PF-Test-Project.

[hgfrey]

I've had this problem before:

https://github.com/orgs/primefaces/discussions/204

If I increase the timeout from 100 to 150 milliseconds, the focus remains on the dialog or is set here again.

I tried to build a tester to display the problem. But I didn't succeed. The dialogue works as expected.

Something is taking my focus away, but what?

[melloware]

Can you reproduce it with a PrimeFaces Test? As you can see mine is using PF 13 and working perfectly under ARIA and Accessibility guidelines focusing the correct Button and then returning focus to the originating caller. If you have a PF Test reproducer I can take a look, if not you have to assume you have a bug in your application.

[hgfrey]

I'm trying to gradually incorporate our application into your tester. Let's see what happens.

[melloware]

Excellent. That is the only way to truly get to the bottom of a problem.

[hgfrey]

Unfortunately, the next attempt also works. :-(

[hgfrey]

If I set global="false" the application works as expected. But I still need the extra line from:

https://github.com/orgs/primefaces/discussions/204

PrimeFaces.current().executeScript("setTimeout( () => PF('" + widgetVar + "').applyFocus(), 100 )");

[hgfrey]

Unfortunately, the next attempt also works. :-(

[hgfrey]

I'll look at it again tomorrow.

[hgfrey]

Please have a look at my tester.

When I click on the button, setting the focus works, but when I click on one of the two links it doesn't work.

primefaces-test-master.zip

[melloware]

Awesome! You are not crazy. I see it too so I am debugging to figure out why CommandLink is different!

[hgfrey]

Thank you

[melloware]

Ticket opened: primefaces/primefaces#11818

Fixed for 13.0.9!

[hgfrey]

super!

[hgfrey]

Unfortunately, the focus is still not set. Now it is no longer set when I press the button. The tester I have provided here shows that the focus is not set. Instead there is now an error on the console:

Uncaught TypeError: this.cfg is undefined
applyFocus http://localhost:8080/primefaces-test/javax.faces.resource/components.js.xhtml?ln=primefaces&v=13.0.9:341
setTimeout handler*applyFocus http://localhost:8080/primefaces-test/javax.faces.resource/components.js.xhtml?ln=primefaces&v=13.0.9:341
postShow http://localhost:8080/primefaces-test/javax.faces.resource/components.js.xhtml?ln=primefaces&v=13.0.9:340
_show http://localhost:8080/primefaces-test/javax.faces.resource/components.js.xhtml?ln=primefaces&v=13.0.9:340
show http://localhost:8080/primefaces-test/javax.faces.resource/components.js.xhtml?ln=primefaces&v=13.0.9:339
http://localhost:8080/primefaces-test/ line 2 > injectedScript:1
jQuery 2
eval http://localhost:8080/primefaces-test/javax.faces.resource/core.js.xhtml?ln=primefaces&v=13.0.9:73
doEval http://localhost:8080/primefaces-test/javax.faces.resource/core.js.xhtml?ln=primefaces&v=13.0.9:67
handle http://localhost:8080/primefaces-test/javax.faces.resource/core.js.xhtml?ln=primefaces&v=13.0.9:64
b http://localhost:8080/primefaces-test/javax.faces.resource/core.js.xhtml?ln=primefaces&v=13.0.9:58
jQuery 6
send http://localhost:8080/primefaces-test/javax.faces.resource/core.js.xhtml?ln=primefaces&v=13.0.9:56
offer http://localhost:8080/primefaces-test/javax.faces.resource/core.js.xhtml?ln=primefaces&v=13.0.9:45
handle http://localhost:8080/primefaces-test/javax.faces.resource/core.js.xhtml?ln=primefaces&v=13.0.9:47
ab http://localhost:8080/primefaces-test/javax.faces.resource/core.js.xhtml?ln=primefaces&v=13.0.9:39
onclick http://localhost:8080/primefaces-test/:1

[melloware]

Sorry you will need this MonkeyPatch.

if (PrimeFaces.widget.Dialog) {
    PrimeFaces.widget.Dialog.prototype.applyFocus = function() {
        if (this.cfg.focus) {
            var $this = this;
            setTimeout(function() {
                PrimeFaces.expressions.SearchExpressionFacade.resolveComponentsAsSelector($this.cfg.focus).trigger('focus');
            }, 100);
        } else
            PrimeFaces.focus(null, this.id);
    }
}

[hgfrey]

The patch works for the commandLink, but not for my commandButton. I have to put together an example of this tomorrow. In my current tester both the link and the button work.

[hgfrey]

BTW: Where should I place the patch? In maine JS file or directly in the xhtml page?

[melloware]

personally i would add it to a JS file that gets included LAST in your order.

[melloware]

Oh if your old code works then you have definitely not applied the patch correctly?

[hgfrey]

The patch works if I set the timout to 150 milliseconds.

Of course, it would be nicer if the element got and kept the focus directly. At 150 milliseconds I have a very noticeable flickering. Will there possibly be a “better” solution in a later version?

[melloware]

You are more than welcome to analyze the issue and provide a better fix. Also it interesting you used 100 in your server side fix but 100ms is not enough on the client side?

The issue is until the dialog is rendered on screen and visible the. It can receive focus from the calling button or link. That is the need for the delay.

[martin654]

Hi, we are having issues with focus when opening dialog since PF 13.0.6. In PF 13.0.5 it worked smoothly.

I created reproducer - please see attached .zip project. It is a bit more complex - we use ajaxStatus and we block user interaction until ajax is completed.
I tried PF 13.0.5, PF 13.0.6 and 13.0.9. It works in 13.0.5 - focus is set on input inside dialog.
I noticed a bit different behavior when dialog opened using mouse click on button vs default command from input in page.

Should I create another issue?

Thank you

primefaces-test_dialog_focus.zip

[melloware]

OK fixed it and added a MonkeyPatch in the ticket. It was related to you using both an AjaxStatusDialog and regular dialog and timing of AJAX ordering etc. Good reproducer!

[melloware]

@martin654 @hgfrey can you both try 13.0.10 i just released to Maven Central. Remove your focus MonkeyPatches and let me know if it is working.

@hgfrey i still don't understand your timeout at 150ms issue as you previously had it at 100ms and it was working and your reproducer you sent me is working at 100ms.

[hgfrey]

I removed the patch and integrated version 13.0.10, now the focus is set again as desired. Excellent! Good job. Thank you very much for the quick help.

[martin654]

@melloware Thank you for the fix, works great in 13.0.10.

[melloware]

Awesome thanks guys!!