Slideover allow page scrolling when overlay is false

[marekbuxobucek]

Description

I want to propose an enhancement for USlideover. Nowadays USlideover blocks user interaction with the rest of the page even when:overlay="false". Interaction with other page components outside of USlideOver and page scrolling should be allowed when overlay is false;

Proposed Change: Feature: create a new prop or extend the functionality of overlay=false. Benefit: This allows user to interact with page when Slideover is open.

Benefits: User can manipulate and interact with page intuitively when Slideover component is open.

Thank you for consideration.

Additional context

No response

[benjamincanac]

I'm not sure we can do much about this at the moment, the Headless UI Dialog component automatically adds an inert attribute on the body when opened and we can't control it. We might be able to solve this after the migration to radix-vue.

[bkelemen92]

Hi,

Maybe it will helpful to someone. I just ran into the same problem, with a sidemenu. I wanted to make the menubuttons clickable while the Slideover is open, which contains submenus. I found an article about observers at https://developer.mozilla.org/en-US/docs/Web/API/MutationObserver

My idea was to create a Slideover component, which creates an observer after mounted, and if the 'inert' attribute is added, then remove it. By controlling the Slideover programmatically it works fine for me.

<template>
    <USlideover id="noOverlay" :overlay="false" side="left" :ui="{wrapper:'fixed h-full flex z-50', overlay:{base:'fixed h-full transition-opacity'}}">
        <UCard>
            <template #header>
                <span>TEST HEAD</span>
            </template>
            <div>
                LINKS
            </div>
        </UCard>
    </USlideover>
</template>

<script setup lang="ts">
    const observeTarget = ref()
    const config = { attributes: true, childList: false, subtree: false};

    const callback = (mutationList:any, observer:any) => {
        for (const mutation of mutationList) {
            if (mutation.type === "attributes" && mutation.attributeName =='inert') {
                observeTarget.value.removeAttribute('inert')//this will remove the inert property from __nuxt root
                document.getElementById('noOverlay')?.classList.remove('inset-0')//this will remove the inset-0 class which prevents interacting the stuff under the overlay
            }
        }
    }

    const observer = new MutationObserver(callback);

    onMounted(() => {
        observeTarget.value = document.getElementById('__nuxt')
        observer.observe(observeTarget.value, config)
    })
</script>

[benjamincanac]

Closing this as it's already done in v3.

Unfortunately, we can't do much in v2 as Headless UI adds the inert attribute on the root node and it's not configurable.