Background buttons clickable when Dialog panel is open

[pradipt.punj1505]

Hi,

In PF11, we are facing one issue in our environments where we can see that the buttons on the background of modal panel are clickable. For example, we have a dialog open and there is another dialog opened (in our case a loading status/in progress dialog) on top of the previous dialog, the buttons are clickable and request is sent to client side. Is there a way in which we can disable or block the click on the background fields as long as the dialog is open?

[Melloware]

By default the background of a modal is not clickable. It sounds like you have a modal dialog with another modal dialog on top of it??? and you are able to click the 1st modal dialog behind the 2nd modal dialog?

[pradipt.punj1505]

That is one of the scenarios.

The other scenarios we have observed is that when we have modal dialog open and click on a action button then we need to show a loading modal, at that time we are able to click on the buttons on the background modal and also we can tab through the fields in the background. Will setting higher zindex for the loading/wait timer modal help in such scenarios?

[Melloware]

Can you create a PrimeFaces Test reproducer so I can see the problem? use: https://github.com/primefaces/primefaces-test

[pradipt.punj1505]

Hi Melloware,

Please find the link of the project below:

https://github.com/pradipt1505/primefaces-test

Once the app is up, there will be two buttons. If you click on the first one, a loading modal will appear on the screen and then if you press tab you can see the focus shifts to the next button. This is kind of similar issue we are experiencing in our application that when loading icon still visible and user presses tab and then press enter then another action takes place due to which application fails.

[Melloware]

Its because the dialog rightfully can't focus trap into the modal dialog because there is nothing to focus so it still allows tabbing outside of the dialog.

To see what I mean change your dialog to this..

Code: Select all

<p:dialog widgetVar="statusDialog" modal="true" draggable="false"
				closable="false" resizable="false" showHeader="false">
		<p:graphicImage value="/resources/images/progress.gif" />
		<p:inputText />
</p:dialog>

Now try and tab out of it and you will see the focus is trapped in the dialog.

[pradipt.punj1505]

Thanks for your response. This does work but the problem here is we cannot have any inputtext displayed there. And if it is styled to not show on the popup then the focus is still on the button in the background.

[Melloware]

That is because the Focus function to focus the first element on the dialog uses this selector...

Code: Select all

focus: function(id, context) {
            var selector = ':not(:submit):not(:button):input:visible:enabled[name]';

But I found a solution that works by using styleClass="ui-helper-hidden-accessible"....

Code: Select all

<p:dialog widgetVar="statusDialog" modal="true" draggable="false"
				closable="false" resizable="false" showHeader="false" >
	<p:graphicImage value="/resources/images/progress.gif" />
	<p:inputText styleClass="ui-helper-hidden-accessible"/>
</p:dialog>

Try that its working for me!

[pradipt.punj1505]

Thanks. This worked for me.