feat(useActiveDescendant): Changing active descendant scrolls into vi…

…ew (microsoft#29992) * feat(useActiveDescendant): Changing active descendant scrolls into view During the change to the next active descendant, check if it needs to be scrolled into view and do so. * changefile
ValentinaKozlova · Dec 5, 2023 · 8a9fadf · 8a9fadf
1 parent f712c83
commit 8a9fadf
Show file tree

Hide file tree

Showing 2 changed files with 40 additions and 1 deletion.
diff --git a/change/@fluentui-react-aria-aa625e96-b6ea-4a15-9d18-ae66a8bf4577.json b/change/@fluentui-react-aria-aa625e96-b6ea-4a15-9d18-ae66a8bf4577.json
@@ -0,0 +1,7 @@
+{
+  "type": "minor",
+  "comment": "feat(useActiveDescendant): Changing active descendant scrolls into view",
+  "packageName": "@fluentui/react-aria",
+  "email": "[email protected]",
+  "dependentChangeType": "patch"
+}
diff --git a/packages/react-components/react-aria/src/activedescendant/useActiveDescendant.ts b/packages/react-components/react-aria/src/activedescendant/useActiveDescendant.ts
@@ -13,6 +13,32 @@ export function useActiveDescendant<TActiveParentElement extends HTMLElement, TL
     return listboxRef.current?.querySelector<HTMLElement>(`[${ACTIVEDESCENDANT_ATTRIBUTE}]`);
   };
 
+  const scrollActiveIntoView = (active: HTMLElement) => {
+    if (!listboxRef.current) {
+      return;
+    }
+
+    if (listboxRef.current.offsetHeight >= listboxRef.current.scrollHeight) {
+      return;
+    }
+
+    const { offsetHeight, offsetTop } = active;
+    const { offsetHeight: parentOffsetHeight, scrollTop } = listboxRef.current;
+
+    const isAbove = offsetTop < scrollTop;
+    const isBelow = offsetTop + offsetHeight > scrollTop + parentOffsetHeight;
+
+    const buffer = 2;
+
+    if (isAbove) {
+      listboxRef.current.scrollTo(0, offsetTop - buffer);
+    }
+
+    if (isBelow) {
+      listboxRef.current.scrollTo(0, offsetTop - parentOffsetHeight + offsetHeight + buffer);
+    }
+  };
+
   const setActiveDescendant = (nextActive: HTMLElement | undefined) => {
     const active = getActiveDescendant();
     if (active) {
@@ -21,6 +47,7 @@ export function useActiveDescendant<TActiveParentElement extends HTMLElement, TL
 
     if (nextActive) {
       nextActive.setAttribute(ACTIVEDESCENDANT_ATTRIBUTE, '');
+      scrollActiveIntoView(nextActive);
       activeParentRef.current?.setAttribute('aria-activedescendant', nextActive.id);
     } else {
       activeParentRef.current?.removeAttribute('aria-activedescendant');
@@ -33,6 +60,7 @@ export function useActiveDescendant<TActiveParentElement extends HTMLElement, TL
         return;
       }
 
+      optionWalker.setCurrent(listboxRef.current);
       const first = optionWalker.first();
       if (first) {
         setActiveDescendant(first);
@@ -65,14 +93,18 @@ export function useActiveDescendant<TActiveParentElement extends HTMLElement, TL
       }
 
       optionWalker.setCurrent(active);
+      if (!matchOption(active)) {
+        optionWalker.prev();
+      }
+
       const next = optionWalker.prev();
 
       if (next && next !== listboxRef.current) {
         setActiveDescendant(next);
       }
     },
     blur: () => {
-      if (!listboxRef.current || !activeParentRef.current) {
+      if (!activeParentRef.current) {
         return;
       }