fix(react-combobox): preserve listbox scrollTop across parent re-renders caused by autoSize middleware

change/@fluentui-react-combobox-522868f4-3ed8-4e2c-8025-38ecc4c7b6a2.json

@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "fix: preserve Combobox listbox scrollTop by stabilizing positioning options to prevent manager recreation on every render (#35731)",
+  "packageName": "@fluentui/react-combobox",
+  "email": "198982749+Copilot@users.noreply.github.com",
+  "dependentChangeType": "patch"
+}

packages/react-components/react-combobox/library/src/utils/useComboboxPositioning.ts

@@ -5,6 +5,14 @@ import { resolvePositioningShorthand, usePositioning } from '@fluentui/react-pos
 import type { ComboboxBaseProps } from './ComboboxBase.types';
 import type * as React from 'react';
 
+// Stable module-level constants prevent new object/array references on every render.
+// Without these constants, new references would cause usePositioningConfigFn's useCallback
+// to recreate on every render, which disposes and recreates the position manager, triggering
+// autoSize middleware (resetMaxSize) that temporarily removes height constraints from the listbox
+// and resets scrollTop to 0. See: https://github.com/microsoft/fluentui/issues/35731
+const DEFAULT_FALLBACK_POSITIONS: PositioningShorthandValue[] = ['above', 'after', 'after-top', 'before', 'before-top'];
+const DEFAULT_OFFSET = { crossAxis: 0, mainAxis: 2 } as const;
+
 export function useComboboxPositioning(props: ComboboxBaseProps): [
   // eslint-disable-next-line @typescript-eslint/no-explicit-any, @typescript-eslint/no-deprecated
   listboxRef: React.MutableRefObject<any>,
@@ -13,15 +21,12 @@ export function useComboboxPositioning(props: ComboboxBaseProps): [
 ] {
   const { positioning } = props;
 
-  // Set a default set of fallback positions to try if the dropdown does not fit on screen
-  const fallbackPositions: PositioningShorthandValue[] = ['above', 'after', 'after-top', 'before', 'before-top'];
-
   // popper options
   const popperOptions = {
     position: 'below' as const,
     align: 'start' as const,
-    offset: { crossAxis: 0, mainAxis: 2 },
-    fallbackPositions,
+    offset: DEFAULT_OFFSET,
+    fallbackPositions: DEFAULT_FALLBACK_POSITIONS,
     matchTargetSize: 'width' as const,
     autoSize: true,
     ...resolvePositioningShorthand(positioning),

packages/react-components/react-combobox/stories/src/Combobox/ComboboxScrollStability.stories.tsx

@@ -0,0 +1,62 @@
+import * as React from 'react';
+import type { JSXElement } from '@fluentui/react-components';
+import { Combobox, makeStyles, Option, useId } from '@fluentui/react-components';
+import type { ComboboxProps } from '@fluentui/react-components';
+
+const useStyles = makeStyles({
+  root: {
+    // Stack the label above the field with a gap
+    display: 'grid',
+    gridTemplateRows: 'repeat(1fr)',
+    justifyItems: 'start',
+    gap: '2px',
+    maxWidth: '400px',
+  },
+});
+
+const options = Array.from({ length: 50 }, (_, i) => `Option ${i + 1}`);
+
+/**
+ * Demonstrates that the listbox scrollTop is preserved when a parent component updates
+ * state in response to hovering an option (e.g. tracking the currently-hovered item).
+ *
+ * Previously, each state update caused the Combobox to re-render, which recreated the
+ * positioning manager and triggered the autoSize middleware to reset the listbox scrollTop
+ * to 0, making the last options in a long list unreachable.
+ * See: https://github.com/microsoft/fluentui/issues/35731
+ */
+export const ScrollStability = (props: Partial<ComboboxProps>): JSXElement => {
+  const comboId = useId('combo-scroll-stability');
+  const styles = useStyles();
+  const [hoveredOption, setHoveredOption] = React.useState<string | null>(null);
+
+  const onMouseEnter = React.useCallback((e: React.MouseEvent<HTMLElement>) => {
+    const value = (e.currentTarget as HTMLElement).dataset.value ?? null;
+    setHoveredOption(value);
+  }, []);
+
+  return (
+    <div className={styles.root}>
+      <label id={comboId}>Scroll-stable Combobox (50 options)</label>
+      <span>Hovered: {hoveredOption ?? 'none'}</span>
+      <Combobox aria-labelledby={comboId} placeholder="Select an option" {...props}>
+        {options.map(option => (
+          <Option key={option} data-value={option} onMouseEnter={onMouseEnter}>
+            {option}
+          </Option>
+        ))}
+      </Combobox>
+    </div>
+  );
+};
+
+ScrollStability.parameters = {
+  docs: {
+    description: {
+      story:
+        'A Combobox with many options where a parent component tracks the hovered option in state. ' +
+        'Scrolling to the bottom of the list and hovering a low option should not cause the listbox ' +
+        'to jump back to the top. This validates the fix for https://github.com/microsoft/fluentui/issues/35731.',
+    },
+  },
+};

packages/react-components/react-combobox/stories/src/Combobox/index.stories.tsx

@@ -21,6 +21,7 @@ export { Disabled } from './ComboboxDisabled.stories';
 export { ComboboxVirtualizer as Virtualizer } from './ComboboxVirtualizer.stories';
 export { ActiveOptionChange } from './ComboboxActiveOptionChange.stories';
 export { ControllingOpenAndClose } from './ComboboxControllingOpenAndClose.stories';
+export { ScrollStability } from './ComboboxScrollStability.stories';
 
 export default {
   title: 'Components/Combobox',