Scroll overflow content without modal moving

[elsonel]

There are two issues I want to bring up:

I have a modal with limited height, and the content inside is overflowing. I want to be able to scroll the content inside using touch on mobile, but the modal moves everything I try to scroll the content. Ideally only when I drag the header should the modal move.

I expect that setting disableDrag={true} prop on <Sheet.Content/> should fix the issue by preventing the entire modal from moving when pointer events are directed towards the content, but it doesn't seem to change anything.

I am only able to scroll the content using touch when disableDrag={true} is set on the parent <Sheet/>. This is my attempted temporary solution using a hook. The hook is updating properly, but <Sheet> doesn't update in response to the updated prop?

const [isDragDisabled, setIsDragDisabled] = useState(true);

...

<Sheet disableDrag={isDragDisabled} onClose={onClose} isOpen={isOpen}>
    <Sheet.Container>
        <div onPointerEnter={() => setIsDragDisabled(false)} onPointerLeave={() => setIsDragDisabled(true)}>
            <Sheet.Header />
        </div>
        <Sheet.Content>{children}</Sheet.Content>
    </Sheet.Container>
</Sheet>

[Temzasse]

Fixed in v1.8.1.