Modal not scrolling on Svelte 5.17.1

[nthskyradiated]

Hey guys,

I have a Svelte 5.0.0-next.152 app which I finally migrated to 5.17.1 but this caused an overflown modal to not scroll.

sv migrate didn't seem to change anything on the problematic modal.

I have also tried passing in the regionBody: 'overflow-visible' prop but that didn't work. This works on 5.0.0-next even without the prop.

	let uploadWaiverModal: ModalSettings = $derived({
		type: 'component',
		component: 'uploadWaiverModal',
		meta: { singleClient: singleClient },
		props: { regionBody: 'overflow-visible' }
	});

<Button
	type="button"
	size="lg"
	variant="secondary"
	class="variant-ghost-secondary mb-4"
	onclick={() => {
	modalStore.trigger(uploadWaiverModal);
	}}>Upload Waiver</Button
	>

I'm currently on "@skeletonlabs/skeleton": "^2.10.4", "@skeletonlabs/skeleton-svelte": "1.0.0-next.2", "@skeletonlabs/tw-plugin": "^0.4.0".

Thanks!

[endigo9740]

@nthskyradiated first things first, it looks like you may have mistakenly mixed some Skeleton v2 and v3 packages. v3 represents a major breaking change, so I want to confirm your intentions here.

1. You appear to be trying to run the v2 skeleton package - which is fine. That will work with Svelte 5, but with some caveats.
2. And you have the tw-plugin package - which is a package that's only for Skeleton v2.
3. However, you have installed the skeleton-svelte package, which is ONLY relevant for v3.

So I want to clarify if your intention - are you aiming to run v2 or v3?

If you wish to use v2 (perhaps this is a existing project you're maintaining) then make sure you've read through the Svelte 5 migration guide. This outlines known issues that you need to be aware of:

• Svelte 5 Migration Guide for Skeleton v2 #2887

If you're trying to migrate to Skeleton v3, then we also provide a detailed migration guide for this. Just know it's in a Release Candidate status, and there have been significant changes to many features - include modals.

• Announcement: Skeleton v3 - Release Candidate 1 🎉 #3062
• Migration Guide: Skeleton v3 Migration Guide #2921

The TL;DR here is that Skeleton v2 was built to utilize Svelte 4, while Skeleton v3 has been rebuilt from the ground up to support Svelte 5 - including new APIs like the $derived rune. I would not expect the new APIs to be plug and play like you've demoed in your snippets above.

I will warn you that the migration from v2 to v3 is not yet trivial - built we're building some CLI tooling to help with this. And if this is a new project, my personal recommendation would be to start anew with a fresh v3 project if possible. Instructions can be found here.

So let's start there, and then we can diagnose the scroll issue once I'm confident of you path forward.

[nthskyradiated]

Thanks for pointing that out Chris.

IIRC, I briefly tried out skeleton next quite awhile ago but decided to revert to using v2. I already removed skeleton-svelte from the package.

The plan is to migrate a project to the latest Svelte 5 version followed by Skeleton v3 migration some time after.

I just tried creating a simple Svelte project following Skeleton Next's documentation to see if it would have the same issue with the modal component and it still does:

<Modal
    bind:open={openState}
    triggerBase="btn preset-tonal"
    contentBase="card bg-surface-100-900 p-4 space-y-4 shadow-xl max-w-screen-sm"
    backdropClasses="backdrop-blur-sm"
  >
    {#snippet trigger()}Open Modal{/snippet}
    {#snippet content()}
      <header class="flex justify-between">
        <h2 class="h2">Modal Example</h2>
      </header>
      <article>
        <p class="opacity-60">
            // lorem2000
        </p>
      </article>
      <footer class="flex justify-end gap-4">
        <button type="button" class="btn preset-tonal" onclick={modalClose}>Cancel</button>
        <button type="button" class="btn preset-filled" onclick={modalClose}>Confirm</button>
      </footer>
    {/snippet}
  </Modal>

In any case, If I couldn't work around this now, I'll just wait for the CLI tool to be released and see how it goes from there.

Thanks for an amazing work! 🙏

[endigo9740]

@nthskyradiated ok glad you were able to get that sorted. Yeah v3 is coming over the next couple weeks definitely keep an eye out for that.

As for the modal scroll issue, it's not a bug per se, but rather something we leave up to the end users. We don't take an opinionated stance that users will want their modals to scroll - as most modals should ideally fit within the contents of the screen.

If you're using a custom component as your modal, then regionBody isn't automatically available. You are responsible for reimplementing all standard props. We cover this in the list of tips here, per "Inherit Modal Component Props":
https://www.skeleton.dev/utilities/modals#creating-a-component

NOTE: try logging parent to see what values are available to use.

There's a couple options for handling scrolling for modals - I might suggest using regionBackdrop scrolling versus the body, to ensure it works with all screen sizes. Here's a quick visual comparison of the two scroll methods:

let uploadWaiverModal: ModalSettings = {
    // ...
    props: { regionBackdrop: 'overflow-y-auto' }
};

For Skeleton v3, the equivalent prop will be called backdropClasses. This allows you to provide arbitrary classes to extend the class list for the backdrop element. This is set directly on the Modal instance:

<Modal backdropClasses="overflow-y-auto">...</Modal>