Nuxt•12mo ago

Modal capturing Slideover focus

When I utilize useModal() composable inside of <USlideover />, any modal focus (eg, button clicks) are causing the slideover to close. I can use prevent-close on the slideover, but I like it closing when the user clicks out.

Is there a way to control the focus trap, or some other built-in way to have composable-generated modals not close the slideover?

kapa.ai•1/12/25, 9:51 PM

Hi @jscottym. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base.

kapa.ai•1/12/25, 9:51 PM

----------------------
Based on the knowledge sources provided, I can offer some insights into your issue with modals and slidesovers in Nuxt UI. However, there isn't a direct solution to your specific problem in the given information. Let me explain what we know and suggest a potential workaround.

The component in Nuxt UI does have a prop that can be used to disable outside clicks and the keyboard shortcut for closing the slideover. As you mentioned, this isn't ideal for your use case since you want to maintain the ability to close the slideover when clicking outside of it.

For modals, Nuxt UI provides a composable that allows programmatic control of modals. However, the interaction between modals created with this composable and slidesovers isn't explicitly addressed in the provided documentation.

A potential workaround you could try is to use the composable to handle the closing of the slideover yourself. This way, you can have more control over when the slideover closes. Here's an example of how you might implement this:

In this approach, you would need to implement a way to track whether a modal is currently open. When the escape key is pressed, you can check if a modal is open before closing the slideover.

kapa.ai•1/12/25, 9:51 PM

For handling clicks outside the slideover, you might need to implement a custom solution using event listeners and checking if the click target is within the modal or slideover.

It's worth noting that this is a complex interaction that isn't directly addressed in the provided Nuxt UI documentation. You might want to consider opening an issue on the Nuxt UI GitHub repository to request a more integrated solution for this use case.

Nuxt UI Slideover Documentation
Nuxt UI Modal Documentation
----------------------
Note: you can ask me a follow up question by @ mentioning me again

----------------------

kapa.ai•1/12/25, 9:51 PM

@1086074300446035988 Kapa.ai is still learning and improving, please let me know how I did by reacting below.

jscottymOP•1/12/25, 10:03 PM

@kapa.ai, it's the clicks/focus I need to prevent propagation for, in addition to keystrokes...

kapa.ai•1/12/25, 10:03 PM

Let me check the knowledge base for you again. One moment!

kapa.ai•1/12/25, 10:03 PM

----------------------
I understand you're looking for a way to prevent both clicks/focus and keystrokes from propagating and closing the slideover when interacting with a modal inside it. Based on the information provided in the knowledge sources, I can offer some insights and a potential approach, although there isn't a direct built-in solution for this specific scenario.

To address both click/focus events and keystrokes, you might need to combine a few techniques:

For keystrokes, you can use the composable as mentioned earlier.
For click and focus events, you can try to modify the UI configuration of the slideover to prevent event propagation. Here's an approach you could try:

In this example, we're setting on the overlay and on the base of the slideover. This should allow clicks within the slideover (including on the modal) while preventing clicks on the overlay from closing the slideover.

However, this approach might have side effects on the overall behavior of the slideover, so you'll need to test it thoroughly in your specific use case.

If this doesn't fully solve your issue, you might need to create a custom solution. Unfortunately, the provided knowledge sources don't contain information about a built-in way to handle this specific interaction between composable-generated modals and slidesovers.

kapa.ai•1/12/25, 10:03 PM

Given the complexity of your requirement, it might be worth considering opening a feature request or an issue on the Nuxt UI GitHub repository. This could lead to a more integrated solution for handling nested modal-like components in the future.

Nuxt UI Slideover Documentation

Remember to thoroughly test any custom solution to ensure it doesn't introduce unexpected behavior in other parts of your application.
----------------------
Note: you can ask me a follow up question by @ mentioning me again

----------------------

kapa.ai•1/12/25, 10:03 PM

@1086074300446035988 Kapa.ai is still learning and improving, please let me know how I did by reacting below.

jscottymOP•1/12/25, 10:17 PM

that didn't work