internal: fixes issue where synth scroll did not occur if elFromPoint…

…s did not return any
formkit · Dec 14, 2024 · 59e9825 · 59e9825
1 parent fc93e34
commit 59e9825
Show file tree

Hide file tree

Showing 6 changed files with 34 additions and 12 deletions.
diff --git a/dist/index.cjs b/dist/index.cjs
@@ -2765,7 +2765,7 @@ function scrollY(el, e, state2) {
   let shouldScroll = false;
   let scroll = 0;
   const isDocumentElement = el === document.documentElement;
-  const threshold = isDocumentElement ? window.innerHeight * 0.1 : 0.5;
+  const threshold = isDocumentElement ? window.innerHeight * 0.05 : 0.05;
   const isBottomEdge = e.clientY > window.innerHeight - threshold;
   const isTopEdge = e.clientY < threshold;
   if (isBottomEdge && el.scrollTop + el.clientHeight < el.scrollHeight) {
@@ -2844,12 +2844,16 @@ function handleSynthScroll(coordinates, e, state2) {
     coordinates.x,
     coordinates.y
   );
+  if (els.length === 0) {
+    scrollables.y = document.documentElement;
+    scrollables.x = document.documentElement;
+  }
   for (const el of els) {
     if (scrollables.x && scrollables.y) break;
     const styles = window.getComputedStyle(el);
-    const isScrollableX = !scrollables.x && (styles.overflowX === "auto" || styles.overflowX === "scroll") && el.scrollWidth > el.clientWidth;
+    const isScrollableX = !scrollables.x && (styles.overflowX === "auto" || styles.overflowX === "scroll" || el === document.body || el === document.documentElement) && el.scrollWidth > el.clientWidth;
     const isScrollableY = !scrollables.y && (styles.overflowY === "auto" || styles.overflowY === "scroll" || el === document.body || el === document.documentElement) && el.scrollHeight > el.clientHeight;
-    if (isScrollableY && isMostlyInViewByHeight(el)) {
+    if (isScrollableY && (isMostlyInViewByHeight(el) || el === document.body || el === document.documentElement)) {
       scrollables.y = el;
     }
     if (isScrollableX && isMostlyInViewByWidth(el)) {

diff --git a/dist/index.cjs.map b/dist/index.cjs.map
diff --git a/dist/index.mjs b/dist/index.mjs
@@ -2675,7 +2675,7 @@ function scrollY(el, e, state2) {
   let shouldScroll = false;
   let scroll = 0;
   const isDocumentElement = el === document.documentElement;
-  const threshold = isDocumentElement ? window.innerHeight * 0.1 : 0.5;
+  const threshold = isDocumentElement ? window.innerHeight * 0.05 : 0.05;
   const isBottomEdge = e.clientY > window.innerHeight - threshold;
   const isTopEdge = e.clientY < threshold;
   if (isBottomEdge && el.scrollTop + el.clientHeight < el.scrollHeight) {
@@ -2754,12 +2754,16 @@ function handleSynthScroll(coordinates, e, state2) {
     coordinates.x,
     coordinates.y
   );
+  if (els.length === 0) {
+    scrollables.y = document.documentElement;
+    scrollables.x = document.documentElement;
+  }
   for (const el of els) {
     if (scrollables.x && scrollables.y) break;
     const styles = window.getComputedStyle(el);
-    const isScrollableX = !scrollables.x && (styles.overflowX === "auto" || styles.overflowX === "scroll") && el.scrollWidth > el.clientWidth;
+    const isScrollableX = !scrollables.x && (styles.overflowX === "auto" || styles.overflowX === "scroll" || el === document.body || el === document.documentElement) && el.scrollWidth > el.clientWidth;
     const isScrollableY = !scrollables.y && (styles.overflowY === "auto" || styles.overflowY === "scroll" || el === document.body || el === document.documentElement) && el.scrollHeight > el.clientHeight;
-    if (isScrollableY && isMostlyInViewByHeight(el)) {
+    if (isScrollableY && (isMostlyInViewByHeight(el) || el === document.body || el === document.documentElement)) {
       scrollables.y = el;
     }
     if (isScrollableX && isMostlyInViewByWidth(el)) {

diff --git a/dist/index.mjs.map b/dist/index.mjs.map
diff --git a/docs/nuxt.config.ts b/docs/nuxt.config.ts
@@ -19,7 +19,7 @@ export default defineNuxtConfig({
   css: ["@/assets/css/main.css"],
 
   experimental: {
-    componentIslands: true,
+    componentIslands: false,
   },
 
   runtimeConfig: {

diff --git a/src/index.ts b/src/index.ts
@@ -2974,7 +2974,7 @@ function scrollY<T>(
 
   const isDocumentElement = el === document.documentElement;
 
-  const threshold = isDocumentElement ? window.innerHeight * 0.1 : 0.5;
+  const threshold = isDocumentElement ? window.innerHeight * 0.05 : 0.05;
 
   const isBottomEdge = e.clientY > window.innerHeight - threshold;
 
@@ -3117,6 +3117,12 @@ function handleSynthScroll<T>(
     coordinates.y
   ) as HTMLElement[];
 
+  if (els.length === 0) {
+    scrollables.y = document.documentElement;
+
+    scrollables.x = document.documentElement;
+  }
+
   for (const el of els) {
     // Exit early if both scrollable elements are found
     if (scrollables.x && scrollables.y) break;
@@ -3125,7 +3131,10 @@ function handleSynthScroll<T>(
 
     const isScrollableX =
       !scrollables.x &&
-      (styles.overflowX === "auto" || styles.overflowX === "scroll") &&
+      (styles.overflowX === "auto" ||
+        styles.overflowX === "scroll" ||
+        el === document.body ||
+        el === document.documentElement) &&
       el.scrollWidth > el.clientWidth;
 
     const isScrollableY =
@@ -3136,7 +3145,12 @@ function handleSynthScroll<T>(
         el === document.documentElement) &&
       el.scrollHeight > el.clientHeight;
 
-    if (isScrollableY && isMostlyInViewByHeight(el)) {
+    if (
+      isScrollableY &&
+      (isMostlyInViewByHeight(el) ||
+        el === document.body ||
+        el === document.documentElement)
+    ) {
       scrollables.y = el as HTMLElement;
     }