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

…ew (#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

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": "lingfangao@hotmail.com",
+ "dependentChangeType": "patch"
+}

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;
  }