Dynamic Dialog allows keyboard control in underlying calling page

UI Components for Angular
Post Reply
e.k
Posts: 2
Joined: 05 Jul 2019, 15:15

08 Jul 2019, 21:58

I'm using PrimeNG 7.1.3 controls and noticing an issue with the Dynamic Dialog control and wondering if there is a way to truly open this control as a "modal" dialog (i.e. contain keyboard events within the dialog box).

Currently, when opening the Dynamic Dialog control, no mouse events are allowed in the background calling page (as expected), but the focus remains in the background calling page and if you press the Enter key the same button/link that triggered the opening of the dialog will fire again and the user is unknowingly able to create multiple instances of the dialog, while the background continues to get darker and darker from the opacity setting of the stacked background overlays. Even when I create an autofocus directive to set the focus to a control within the dialog, the user is still able to tab (or shift-tab) out of the dialog into the background calling page and execute functionality within that page using the keyboard even though there is a dialog in the foreground.

The same happens with the demo code for the Dynamic Dialog control on the PrimeNG site, so it's not any custom code that I have added in my specific project. You can see this behaviour for yourself by viewing the demo page (https://www.primefaces.org/primeng/#/dynamicdialog) and clicking the "Show" button and then pressing the Enter key before moving focus to dialog box. It seems like there are some additional properties on the regular Dialog control that are missing on the Dynamic Dialog control to prevent this sort of behavior (e.g. "modal" and "focusTrap").

Can these properties be implemented on the Dynamic Dialog to prevent these issues and enhance the usability of this control? And in the meantime does anyone know how I can manually prevent the keyboard events from being responsive in the background calling page (without manually setting the disabled property of each control when I detect that the dialog box is open)?

Thanks.

yigitfindikli
Posts: 449
Joined: 08 Aug 2018, 14:09

09 Jul 2019, 08:54

e.k wrote:
08 Jul 2019, 21:58
I'm using PrimeNG 7.1.3 controls and noticing an issue with the Dynamic Dialog control and wondering if there is a way to truly open this control as a "modal" dialog (i.e. contain keyboard events within the dialog box).

Currently, when opening the Dynamic Dialog control, no mouse events are allowed in the background calling page (as expected), but the focus remains in the background calling page and if you press the Enter key the same button/link that triggered the opening of the dialog will fire again and the user is unknowingly able to create multiple instances of the dialog, while the background continues to get darker and darker from the opacity setting of the stacked background overlays. Even when I create an autofocus directive to set the focus to a control within the dialog, the user is still able to tab (or shift-tab) out of the dialog into the background calling page and execute functionality within that page using the keyboard even though there is a dialog in the foreground.

The same happens with the demo code for the Dynamic Dialog control on the PrimeNG site, so it's not any custom code that I have added in my specific project. You can see this behaviour for yourself by viewing the demo page (https://www.primefaces.org/primeng/#/dynamicdialog) and clicking the "Show" button and then pressing the Enter key before moving focus to dialog box. It seems like there are some additional properties on the regular Dialog control that are missing on the Dynamic Dialog control to prevent this sort of behavior (e.g. "modal" and "focusTrap").

Can these properties be implemented on the Dynamic Dialog to prevent these issues and enhance the usability of this control? And in the meantime does anyone know how I can manually prevent the keyboard events from being responsive in the background calling page (without manually setting the disabled property of each control when I detect that the dialog box is open)?

Thanks.
Hi,
Actually dynamic dialog your component, maybe you can focus in your component or you can blur button.
Here is example for you;

ts;

Code: Select all

show(event) {
        const ref = this.dialogService.open(CarsListDemo, {
            header: 'Choose a Car',
            width: '70%',
            contentStyle: {"max-height": "350px", "overflow": "auto"}
        });

        ref.onClose.subscribe((car: Car) =>{
            if (car) {
                this.messageService.add({severity:'info', summary: 'Car Selected', detail:'Vin:' + car.vin});
            }
        });
        event.target.parentElement.blur();
    }
html;

Code: Select all

    <button type="button" (click)="show($event)" pButton icon="pi pi-info-circle" label="Show"></button>
But could be bug. You can always create ticket at https://github.com/primefaces/primeng/issues .
Best Regards.

e.k
Posts: 2
Joined: 05 Jul 2019, 15:15

09 Jul 2019, 15:30

Thanks for the suggestion, but unfortunately blurring the button still leaves the focus in the calling page instead of moving it to the dialog. I currently have a workaround to set the focus to a control within with dialog component when it's opened, but I shouldn't have to do this manually and it still doesn't prevent the user from tabbing outside of the dialog.

I will create a ticket for this and hopefully those other dialog properties ("modal" and "focusTrap") will be added to the Dynamic Dialog control to make it more usable.

Thanks.

yigitfindikli
Posts: 449
Joined: 08 Aug 2018, 14:09

10 Jul 2019, 08:15

e.k wrote:
09 Jul 2019, 15:30
Thanks for the suggestion, but unfortunately blurring the button still leaves the focus in the calling page instead of moving it to the dialog. I currently have a workaround to set the focus to a control within with dialog component when it's opened, but I shouldn't have to do this manually and it still doesn't prevent the user from tabbing outside of the dialog.

I will create a ticket for this and hopefully those other dialog properties ("modal" and "focusTrap") will be added to the Dynamic Dialog control to make it more usable.

Thanks.
They are will be added in future. Thanks for the ticket.
Best Regards.

Withnail73
Posts: 7
Joined: 01 Nov 2019, 18:32

18 May 2021, 16:59

e.k wrote:
09 Jul 2019, 15:30
Thanks for the suggestion, but unfortunately blurring the button still leaves the focus in the calling page instead of moving it to the dialog. I currently have a workaround to set the focus to a control within with dialog component when it's opened, but I shouldn't have to do this manually and it still doesn't prevent the user from tabbing outside of the dialog.

I will create a ticket for this and hopefully those other dialog properties ("modal" and "focusTrap") will be added to the Dynamic Dialog control to make it more usable.

Thanks.
Hi there... I'm trying to put this workaround in place, but despite the field on the dialog looking like it has focus, it doesn't - the button still has it. Can you please show me how you went about it? Thanks!

[edit] If I added autofocus to a button on the dialog, that solves it, but I'm trying to add it to a prime drop-down. the Autofocus attribute alone doesn't work, so I'm getting it as a @Viewchild and setting focus directly which sets the border... but it's not focused.

Post Reply

Return to “PrimeNG”

  • Information
  • Who is online

    Users browsing this forum: No registered users and 5 guests