Modal

[thejackshelton-kunaico]

No description provided.

[changeset-bot]

⚠️ No Changeset found

Latest commit: a5601b1

Merging this PR will not cause a version bump for any packages. If these changes should not result in a new version, you're good to go. If these changes should result in a version bump, you need to add a changeset.

This PR includes no changesets

When changesets are added to this PR, you'll see the packages that this PR includes changesets for and the associated semver types

Click here to learn what changesets are, and how to add one.

Click here if you're a maintainer who wants to add a changeset to this PR

[cloudflare-workers-and-pages]

Deploying qwik-design-system with    Cloudflare Pages

Latest commit:	a5601b1
Status:	✅  Deploy successful!
Preview URL:	https://045bd102.qwik-design-system.pages.dev
Branch Preview URL:	https://feat-modal.qwik-design-system.pages.dev

View logs

[cursor]

Bug: Modal Scroll Management Issues

The ModalRootBase component's useTask$ has multiple issues:

1. Scroll Management Race Condition: The cleanup function re-enables page scroll when the modal opens, immediately before it's disabled, causing flickering or inconsistent scroll behavior.
2. Delayed Scroll Re-enablement: Page scroll is not immediately re-enabled when the modal closes, as enablePageScrollFn is only called in the cleanup function, which runs later.
3. Incomplete Initialization/Operation: The useTask$ only tracks isOpenSig.value, but scroll setup and modal open/close operations depend on contentRef.value. An early return if contentRef.value is undefined can prevent proper initialization or modal functionality.

libs/components/src/modal/modal-root.tsx#L41-L69

qwik-design-system/libs/components/src/modal/modal-root.tsx

Lines 41 to 69 in a5601b1

	useTask$(({ track, cleanup }) => {
	track(() => isOpenSig.value);
	if (!isMarkedSig.value) {
	if (!contentRef.value) return;
	markScrollable(contentRef.value);
	isMarkedSig.value = true;
	const { disablePageScroll, enablePageScroll } = createNoScroll({
	onInitScrollDisable: initTouchHandler,
	onResetScrollDisable: resetTouchHandler
	});
	disablePageScrollFn.value = noSerialize(disablePageScroll);
	enablePageScrollFn.value = noSerialize(enablePageScroll);
	}
	if (isOpenSig.value) {
	contentRef.value?.showModal();
	disablePageScrollFn.value?.();
	} else {
	contentRef.value?.close();
	}
	cleanup(() => {
	enablePageScrollFn.value?.();
	});
	});

Fix in Cursor • Fix in Web

---

Bug: Runtime Dependency Listed Incorrectly

The @fluejs/noscroll dependency is incorrectly listed in devDependencies in libs/components/package.json. As it's imported and used at runtime in modal-root.tsx, it must be moved to dependencies to prevent production failures.

libs/components/package.json#L34-L35

qwik-design-system/libs/components/package.json

Lines 34 to 35 in a5601b1

	"@builder.io/qwik": "^1.14.1",
	"@fluejs/noscroll": "^1.0.0",

Fix in Cursor • Fix in Web

---

Was this report helpful? Give feedback by reacting with 👍 or 👎