fix(active-desendant): item scroll when not in view (#199)

makeup · Jan 28, 2025 · 64355ba · 64355ba
1 parent ba4cca1
commit 64355ba
Show file tree

Hide file tree

Showing 11 changed files with 57 additions and 18 deletions.
diff --git a/docs/core/makeup-active-descendant/index.min.js b/docs/core/makeup-active-descendant/index.min.js
diff --git a/docs/core/makeup-active-descendant/index.min.js.map b/docs/core/makeup-active-descendant/index.min.js.map
diff --git a/docs/ui/makeup-combobox/index.min.js b/docs/ui/makeup-combobox/index.min.js
diff --git a/docs/ui/makeup-combobox/index.min.js.map b/docs/ui/makeup-combobox/index.min.js.map
diff --git a/docs/ui/makeup-listbox-button/index.min.js b/docs/ui/makeup-listbox-button/index.min.js
diff --git a/docs/ui/makeup-listbox-button/index.min.js.map b/docs/ui/makeup-listbox-button/index.min.js.map
diff --git a/docs/ui/makeup-listbox/index.min.js b/docs/ui/makeup-listbox/index.min.js
diff --git a/docs/ui/makeup-listbox/index.min.js.map b/docs/ui/makeup-listbox/index.min.js.map
diff --git a/packages/core/makeup-active-descendant/dist/cjs/index.js b/packages/core/makeup-active-descendant/dist/cjs/index.js
@@ -17,6 +17,10 @@ const defaultOptions = {
   axis: "both",
   wrap: false
 };
+function isElementInView(el) {
+  const bounding = el.getBoundingClientRect();
+  return bounding.top >= 0 && bounding.left >= 0 && bounding.bottom <= (window.innerHeight || document.documentElement.clientHeight) && bounding.right <= (window.innerWidth || document.documentElement.clientWidth);
+}
 function onModelInit(e) {
   const {
     items,
@@ -44,9 +48,10 @@ function onModelChange(e) {
   if (toItem) {
     toItem.classList.add(this._options.activeDescendantClassName);
     this._focusEl.setAttribute("aria-activedescendant", toItem.id);
-    if (this._options.autoScroll && this._itemContainerEl) {
+    if (this._options.autoScroll && this._itemContainerEl && !isElementInView(toItem)) {
       toItem.scrollIntoView({
-        block: "center"
+        behavior: "smooth",
+        block: "nearest"
       });
     }
   }

diff --git a/packages/core/makeup-active-descendant/dist/mjs/index.js b/packages/core/makeup-active-descendant/dist/mjs/index.js
@@ -8,6 +8,10 @@ const defaultOptions = {
   axis: "both",
   wrap: false
 };
+function isElementInView(el) {
+  const bounding = el.getBoundingClientRect();
+  return bounding.top >= 0 && bounding.left >= 0 && bounding.bottom <= (window.innerHeight || document.documentElement.clientHeight) && bounding.right <= (window.innerWidth || document.documentElement.clientWidth);
+}
 function onModelInit(e) {
   const { items, toIndex } = e.detail;
   const itemEl = items[toIndex];
@@ -27,8 +31,8 @@ function onModelChange(e) {
   if (toItem) {
     toItem.classList.add(this._options.activeDescendantClassName);
     this._focusEl.setAttribute("aria-activedescendant", toItem.id);
-    if (this._options.autoScroll && this._itemContainerEl) {
-      toItem.scrollIntoView({ block: "center" });
+    if (this._options.autoScroll && this._itemContainerEl && !isElementInView(toItem)) {
+      toItem.scrollIntoView({ behavior: "smooth", block: "nearest" });
     }
   }
   this._el.dispatchEvent(new CustomEvent("activeDescendantChange", { detail: e.detail }));

diff --git a/packages/core/makeup-active-descendant/src/index.js b/packages/core/makeup-active-descendant/src/index.js
@@ -12,6 +12,16 @@ const defaultOptions = {
   wrap: false,
 };
 
+function isElementInView(el) {
+  const bounding = el.getBoundingClientRect();
+  return (
+    bounding.top >= 0 &&
+    bounding.left >= 0 &&
+    bounding.bottom <= (window.innerHeight || document.documentElement.clientHeight) &&
+    bounding.right <= (window.innerWidth || document.documentElement.clientWidth)
+  );
+}
+
 function onModelInit(e) {
   const { items, toIndex } = e.detail;
   const itemEl = items[toIndex];
@@ -37,8 +47,8 @@ function onModelChange(e) {
     toItem.classList.add(this._options.activeDescendantClassName);
     this._focusEl.setAttribute("aria-activedescendant", toItem.id);
 
-    if (this._options.autoScroll && this._itemContainerEl) {
-      toItem.scrollIntoView({ block: "center" });
+    if (this._options.autoScroll && this._itemContainerEl && !isElementInView(toItem)) {
+      toItem.scrollIntoView({ behavior: "smooth", block: "nearest" });
     }
   }