Nuxt•2mo 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?

6 Replies

kapa.ai•2mo ago

Hi @jscottym. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- 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 USlideover component in Nuxt UI does have a prevent-close prop that can be used to disable outside clicks and the esc 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 useModal 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 defineShortcuts 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:

<script setup>
const isOpen = ref(false)

defineShortcuts({
  escape: {
    usingInput: true,
    whenever: [isOpen],
    handler: () => {
      // Check if a modal is open before closing the slideover
      if (!modalIsOpen()) {
        isOpen.value = false
      }
    }
  }
})

// You would need to implement this function to check if a modal is open
function modalIsOpen() {
  // Logic to determine if a modal is open
}
</script>

<template>
  <USlideover v-model="isOpen">
    <!-- Your slideover content -->
  </USlideover>
</template>

<script setup>
const isOpen = ref(false)

defineShortcuts({
  escape: {
    usingInput: true,
    whenever: [isOpen],
    handler: () => {
      // Check if a modal is open before closing the slideover
      if (!modalIsOpen()) {
        isOpen.value = false
      }
    }
  }
})

// You would need to implement this function to check if a modal is open
function modalIsOpen() {
  // Logic to determine if a modal is open
}
</script>

<template>
  <USlideover v-model="isOpen">
    <!-- Your slideover content -->
  </USlideover>
</template>

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. 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 :speech_balloon: ----------------------

kapa.ai•2mo ago

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

jscottymOP•2mo ago

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

kapa.ai•2mo ago

Let me check the knowledge base for you again. One moment! :books: ---------------------- 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: 1. For keystrokes, you can use the defineShortcuts composable as mentioned earlier. 2. 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:

<template>
  <USlideover 
    v-model="isOpen"
    :ui="{ 
      overlay: { base: 'pointer-events-none' },
      base: 'pointer-events-auto'
    }"
  >
    <!-- Your slideover content including the modal -->
  </USlideover>
</template>

<script setup>
const isOpen = ref(false)

// Your modal logic here
</script>

<template>
  <USlideover 
    v-model="isOpen"
    :ui="{ 
      overlay: { base: 'pointer-events-none' },
      base: 'pointer-events-auto'
    }"
  >
    <!-- Your slideover content including the modal -->
  </USlideover>
</template>

<script setup>
const isOpen = ref(false)

// Your modal logic here
</script>

In this example, we're setting pointer-events-none on the overlay and pointer-events-auto 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. 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 :speech_balloon: ----------------------

kapa.ai•2mo ago

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

jscottymOP•2mo ago

that didn't work

Gaming

Programming

Modal capturing Slideover focus

Did you find this page helpful?