Multiple Open Dialog Modal Components - Focus Trap

UI Components for Vue
Post Reply
Posts: 4
Joined: 10 Jul 2021, 15:20

28 Nov 2021, 16:49

Hello. I have a parent Dialog component, which opens a child Dialog component. With both of them visible, the child dialog component is not focus trapping keyboard navigation so that tabbing, etc. behaves as expected.

So far, the only way I've been able to ensure an ADA compliant form is to hide the parent modal when the child modal is shown, but I don't want that user experience. As long as only one dialog modal is open, there's no issue. I've tried using the zIndex configuration, but that does nothing.

I'm currently using PrimeVue v3.8.2. Would this be considered a defect or am I missing some configuration which ensures that the focus is on the top-most component? I'm going to keep working my way through this, but would appreciate any guidance that can be given.

This is the component I'm referring to:

Posts: 289
Joined: 23 Oct 2020, 09:28

30 Nov 2021, 16:11


You could try to use 'appendTo' property but we recommend using separated dialogs.


Posts: 4
Joined: 10 Jul 2021, 15:20

01 Dec 2021, 11:08

Thank you. I tried appendTo="self" on the child modal, but it's inconsistent. What I'm seeing is that Primevue doesn't support multiple modals open at the same time. If that's by design, you might consider updating the documentation.

Post Reply

Return to “PrimeVue”

  • Information
  • Who is online

    Users browsing this forum: No registered users and 2 guests