diff --git a/CHANGELOG.md b/CHANGELOG.md
index 5ff3791cd..e19b61ffc 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,5 +1,6 @@
 ## [next]
 
+- refactor: Rework `ComboBox`. Rebuilt the popup using Flutter overlay infrastructure with viewport-aware positioning, configurable popup constraints, variable-height items, text scaling support, keyboard navigation, type-ahead search, and open/close callbacks. ([#1360](https://github.com/bdlukaa/fluent_ui/pull/1360), [#485](https://github.com/bdlukaa/fluent_ui/issues/485), [#1007](https://github.com/bdlukaa/fluent_ui/issues/1007), [#1230](https://github.com/bdlukaa/fluent_ui/issues/1230), and [#1256](https://github.com/bdlukaa/fluent_ui/issues/1256))
 - refactor: Flutter 3.47.1 support ([#1353](https://github.com/bdlukaa/fluent_ui/pull/1353))
   - migrate Material UI imports to the standalone `material_ui` package. [learn more](https://flutter.dev/blog/decoupling-material-cupertino)
 - fix: skip hidden `TitleBar` children when collecting semantics ([#1354](https://github.com/bdlukaa/fluent_ui/pull/1354))
diff --git a/example/lib/screens/forms/combo_box.dart b/example/lib/screens/forms/combo_box.dart
index 8b4ac5d36..a4c5e5219 100644
--- a/example/lib/screens/forms/combo_box.dart
+++ b/example/lib/screens/forms/combo_box.dart
@@ -12,7 +12,7 @@ class ComboBoxPage extends StatefulWidget {
 }
 
 class _ComboBoxPageState extends State<ComboBoxPage> with PageMixin {
-  String? selectedColor = 'Green';
+  String? selectedColor;
   String? selectedCat;
   double fontSize = 20;
   bool disabled = false;
@@ -67,6 +67,7 @@ ComboBox<String>(
             crossAxisAlignment: CrossAxisAlignment.start,
             children: [
               ComboBox<String>(
+                placeholder: const Text('Select a color'),
                 popupColor: colors[selectedColor],
                 value: selectedColor,
                 items: colors.entries.map((final e) {
@@ -131,6 +132,58 @@ ComboBox<String>(
             ],
           ),
         ),
+        subtitle(content: const Text('Constrained and complex popup content')),
+        CodeSnippetCard(
+          codeSnippet: '''
+ComboBox<String>(
+  popupConstraints: const BoxConstraints(maxHeight: 220),
+  items: options,
+  onChanged: onChanged,
+),''',
+          child: Wrap(
+            spacing: 12,
+            runSpacing: 12,
+            children: [
+              ComboBox<String>(
+                value: 'Item 8',
+                popupConstraints: const BoxConstraints(
+                  minWidth: 180,
+                  maxHeight: 220,
+                ),
+                items: [
+                  for (var index = 0; index < 30; index++)
+                    ComboBoxItem(
+                      value: 'Item $index',
+                      enabled: index != 4,
+                      child: Text('Item $index'),
+                    ),
+                ],
+                onChanged: (_) {},
+              ),
+              MediaQuery(
+                data: MediaQuery.of(
+                  context,
+                ).copyWith(textScaler: const TextScaler.linear(1.5)),
+                child: ComboBox<String>(
+                  placeholder: const Text('Complex item'),
+                  items: const [
+                    ComboBoxItem(
+                      value: 'Complex item',
+                      child: Column(
+                        crossAxisAlignment: CrossAxisAlignment.start,
+                        children: [
+                          Text('Complex item'),
+                          Text('A caption that can wrap'),
+                        ],
+                      ),
+                    ),
+                  ],
+                  onChanged: (_) {},
+                ),
+              ),
+            ],
+          ),
+        ),
         subtitle(content: const Text('An editable ComboBox')),
         description(
           content: const Text(
diff --git a/lib/src/controls/form/combo_box.dart b/lib/src/controls/form/combo_box.dart
index 95f26a526..542e31c9d 100644
--- a/lib/src/controls/form/combo_box.dart
+++ b/lib/src/controls/form/combo_box.dart
@@ -1,27 +1,39 @@
+import 'dart:async';
 import 'dart:math' as math;
 
 import 'package:fluent_ui/fluent_ui.dart';
 import 'package:fluent_ui/src/controls/pickers/pickers.dart';
 import 'package:flutter/foundation.dart';
+
 import 'package:flutter/services.dart';
 
 part 'editable_combo_box.dart';
 
 const Duration _kComboBoxMenuDuration = Duration(milliseconds: 300);
+const Duration _kComboBoxSearchDuration = Duration(milliseconds: 500);
 const double _kMenuItemBottomPadding = 6;
-
-/// The default height of a combo box item.
-const double kComboBoxItemHeight = kPickerHeight + _kMenuItemBottomPadding;
 const EdgeInsets _kMenuItemPadding = EdgeInsets.symmetric(horizontal: 12);
 const EdgeInsetsGeometry _kAlignedButtonPadding = EdgeInsetsDirectional.only(
   start: 11,
   end: 15,
 );
-const EdgeInsets _kAlignedMenuMargin = EdgeInsets.zero;
 const EdgeInsetsDirectional _kListPadding = EdgeInsetsDirectional.only(
   top: _kMenuItemBottomPadding,
+  bottom: _kMenuItemBottomPadding,
 );
 
+double _comboBoxEstimatedItemHeight(BuildContext context, TextStyle style) {
+  final painter = TextPainter(
+    text: TextSpan(text: 'M', style: style),
+    textDirection: Directionality.of(context),
+    textScaler: MediaQuery.textScalerOf(context),
+  )..layout();
+  return math.max<double>(kComboBoxItemHeight, painter.height);
+}
+
+/// The default height of a combo box item.
+const double kComboBoxItemHeight = kPickerHeight + _kMenuItemBottomPadding;
+
 /// The default corner radius for combo box elements.
 const kComboBoxRadius = Radius.circular(4);
 
@@ -30,71 +42,8 @@ const kComboBoxRadius = Radius.circular(4);
 /// Used by [ComboBox.selectedItemBuilder].
 typedef ComboBoxBuilder = List<Widget> Function(BuildContext context);
 
-class _ComboBoxMenuPainter extends CustomPainter {
-  _ComboBoxMenuPainter({
-    required this.resize,
-    required this.getSelectedItemOffset,
-    required this.scaledItemHeight,
-    this.selectedIndex,
-    Color borderColor = Colors.black,
-    Color? backgroundColor,
-    int elevation = 0,
-  }) : _painter = BoxDecoration(
-         // If you add an image here, you must provide a real
-         // configuration in the paint() function and you must provide some sort
-         // of onChanged callback here.
-         // color: color,
-         borderRadius: const BorderRadius.all(kComboBoxRadius),
-         border: Border.all(color: borderColor),
-         boxShadow: kElevationToShadow[elevation],
-         color: backgroundColor,
-       ).createBoxPainter(),
-       super(repaint: resize);
-
-  final int? selectedIndex;
-  final Animation<double> resize;
-  final ValueGetter<double> getSelectedItemOffset;
-  final double scaledItemHeight;
-  final BoxPainter _painter;
-
-  @override
-  void paint(Canvas canvas, Size size) {
-    final selectedItemOffset = getSelectedItemOffset();
-    final maxTopOffset = math.max<double>(0, size.height - scaledItemHeight);
-    final minBottomOffset = math.min(scaledItemHeight, size.height);
-    final top = Tween<double>(
-      begin: clampDouble(selectedItemOffset, 0, maxTopOffset),
-      end: 0,
-    );
-
-    final bottom = Tween<double>(
-      begin: clampDouble(
-        top.begin! + scaledItemHeight,
-        minBottomOffset,
-        size.height,
-      ),
-      end: size.height,
-    );
-
-    final rect = Rect.fromLTRB(
-      0,
-      top.evaluate(resize),
-      size.width,
-      bottom.evaluate(resize),
-    );
-
-    _painter.paint(canvas, rect.topLeft, ImageConfiguration(size: rect.size));
-  }
-
-  @override
-  bool shouldRepaint(_ComboBoxMenuPainter oldPainter) {
-    return oldPainter.selectedIndex != selectedIndex ||
-        oldPainter.resize != resize;
-  }
-}
-
 // Do not use the platform-specific default scroll configuration.
-// ComboBox menus should never overscroll or display an overscroll indicator.
+// ComboBox menus should not overscroll or display an overscroll indicator.
 class _ComboBoxScrollBehavior extends FluentScrollBehavior {
   const _ComboBoxScrollBehavior();
 
@@ -106,872 +55,515 @@ class _ComboBoxScrollBehavior extends FluentScrollBehavior {
       const ClampingScrollPhysics();
 }
 
-// The widget that is the button wrapping the menu items.
-class _ComboBoxItemButton<T> extends StatefulWidget {
-  const _ComboBoxItemButton({
-    required this.route,
-    required this.buttonRect,
-    required this.constraints,
-    required this.itemIndex,
-    super.key,
-    this.padding,
-  });
-
-  final _ComboBoxRoute<T> route;
-  final EdgeInsets? padding;
-  final Rect buttonRect;
-  final BoxConstraints constraints;
-  final int itemIndex;
-
-  @override
-  State<_ComboBoxItemButton<T>> createState() => _ComboBoxItemButtonState<T>();
-}
-
-class _ComboBoxItemButtonState<T> extends State<_ComboBoxItemButton<T>> {
-  void _handleFocusChange(bool focused) {
-    final bool inTraditionalMode;
-    switch (FocusManager.instance.highlightMode) {
-      case FocusHighlightMode.touch:
-        inTraditionalMode = false;
-      case FocusHighlightMode.traditional:
-        inTraditionalMode = true;
-    }
-
-    final scrollable = widget.route.scrollController!.hasClients;
-
-    if (focused && inTraditionalMode && scrollable) {
-      final menuLimits = widget.route.getMenuLimits(
-        widget.buttonRect,
-        widget.constraints.maxHeight,
-        widget.itemIndex,
-      );
-      widget.route.scrollController!.animateTo(
-        menuLimits.scrollOffset,
-        curve: Curves.easeInOut,
-        duration: const Duration(milliseconds: 100),
-      );
-    }
-  }
-
-  ComboBoxItem<T> get comboboxMenuItem => widget.route.items[widget.itemIndex];
-
-  void _handleOnTap() {
-    comboboxMenuItem.onTap?.call();
-
-    Navigator.pop(context, _ComboBoxRouteResult<T>(comboboxMenuItem.value));
-  }
+class _ComboBoxItemContainer extends StatelessWidget {
+  const _ComboBoxItemContainer({required this.child, super.key});
 
-  static final Map<LogicalKeySet, Intent> _webShortcuts =
-      <LogicalKeySet, Intent>{
-        LogicalKeySet(LogicalKeyboardKey.enter): const ActivateIntent(),
-      };
+  final Widget child;
 
   @override
   Widget build(BuildContext context) {
-    assert(debugCheckHasFluentTheme(context));
-    Widget child = HoverButton(
-      autofocus: widget.itemIndex == widget.route.selectedIndex,
-      builder: (context, states) {
-        final theme = FluentTheme.of(context);
-        return Padding(
-          padding: const EdgeInsetsDirectional.only(
-            end: 6,
-            start: 6,
-            // bottom: 4.0,
-          ),
-          child: Stack(
-            children: [
-              Container(
-                decoration: BoxDecoration(
-                  color: ButtonThemeData.uncheckedInputColor(
-                    theme,
-                    states.isFocused ? {WidgetState.hovered} : states,
-                    transparentWhenNone: true,
-                  ),
-                  borderRadius: BorderRadius.circular(4),
-                ),
-                padding: widget.padding,
-                child: widget.route.items[widget.itemIndex],
-              ),
-              if (states.isFocused)
-                AnimatedPositionedDirectional(
-                  duration: theme.fastAnimationDuration,
-                  curve: theme.animationCurve,
-                  top: states.isPressed ? 10.0 : 8.0,
-                  bottom: states.isPressed ? 10.0 : 8.0,
-                  child: Container(
-                    width: 3,
-                    decoration: BoxDecoration(
-                      color: theme.accentColor.defaultBrushFor(
-                        theme.brightness,
-                      ),
-                      borderRadius: BorderRadius.circular(50),
-                    ),
-                  ),
-                ),
-            ],
-          ),
-        );
-      },
-      onPressed: comboboxMenuItem.enabled ? _handleOnTap : null,
-      onFocusChange: _handleFocusChange,
+    final theme = FluentTheme.of(context);
+    final hasPadding = _ContainerWithoutPadding.of(context) == null;
+    final states = HoverButton.maybeOf(context)?.states ?? <WidgetState>{};
+    final foregroundColor = states.isDisabled
+        ? theme.resources.textFillColorDisabled
+        : states.isPressed
+        ? theme.resources.textFillColorTertiary
+        : states.isHovered
+        ? theme.resources.textFillColorSecondary
+        : theme.resources.textFillColorPrimary;
+    final densityAdjustment = theme.visualDensity.baseSizeAdjustment.dy;
+    final minimumHeight = math.max<double>(
+      0,
+      (hasPadding
+              ? kComboBoxItemHeight
+              : kComboBoxItemHeight - _kMenuItemBottomPadding) +
+          densityAdjustment,
     );
-    if (kIsWeb) {
-      // On the web, enter doesn't select things, *except* in a <select>
-      // element, which is what a combo box emulates.
-      child = Shortcuts(shortcuts: _webShortcuts, child: child);
-    }
 
-    if (kIsWeb) {
-      child = Focus(
-        onKeyEvent: (node, event) {
-          if (!(event is KeyDownEvent || event is KeyRepeatEvent)) {
-            return KeyEventResult.ignored;
-          }
-
-          if (event.logicalKey == LogicalKeyboardKey.arrowDown) {
-            // if nothing is selected, select the first
-            FocusScope.of(context).nextFocus();
-            return KeyEventResult.handled;
-          } else if (event.logicalKey == LogicalKeyboardKey.arrowUp) {
-            // if nothing is selected, select the last
-            FocusScope.of(context).previousFocus();
-            return KeyEventResult.handled;
-          } else {
-            return KeyEventResult.ignored;
-          }
-        },
-        canRequestFocus: false,
-        child: child,
-      );
-    }
-
-    return Padding(
-      padding: const EdgeInsetsDirectional.only(
-        bottom: _kMenuItemBottomPadding,
+    return ConstrainedBox(
+      constraints: BoxConstraints(minHeight: minimumHeight),
+      child: Align(
+        alignment: AlignmentDirectional.centerStart,
+        child: DefaultTextStyle.merge(
+          style: TextStyle(color: foregroundColor),
+          child: IconTheme.merge(
+            data: IconThemeData(color: foregroundColor),
+            child: child,
+          ),
+        ),
       ),
-      child: child,
     );
   }
 }
 
-class _ComboBoxMenu<T> extends StatefulWidget {
-  const _ComboBoxMenu({
-    required this.route,
-    required this.buttonRect,
-    required this.constraints,
-    super.key,
-    this.padding,
-    this.popupColor,
-  });
+class _ContainerWithoutPadding extends InheritedWidget {
+  const _ContainerWithoutPadding({required super.child});
 
-  final _ComboBoxRoute<T> route;
-  final EdgeInsets? padding;
-  final Rect buttonRect;
-  final BoxConstraints constraints;
-  final Color? popupColor;
+  static _ContainerWithoutPadding? of(BuildContext context) =>
+      context.dependOnInheritedWidgetOfExactType<_ContainerWithoutPadding>();
 
   @override
-  State<_ComboBoxMenu<T>> createState() => _ComboBoxMenuState<T>();
+  bool updateShouldNotify(_ContainerWithoutPadding oldWidget) => true;
 }
 
-class _ComboBoxMenuState<T> extends State<_ComboBoxMenu<T>> {
-  late CurvedAnimation _fadeOpacity;
-  late CurvedAnimation _resize;
-
-  @override
-  void initState() {
-    super.initState();
-    // We need to hold these animations as state because of their curve
-    // direction. When the route's animation reverses, if we were to recreate
-    // the CurvedAnimation objects in build, we'd lose
-    // CurvedAnimation._curveDirection.
-    _fadeOpacity = CurvedAnimation(
-      parent: widget.route.animation!,
-      curve: const Interval(0, 0.25),
-      reverseCurve: const Interval(0.75, 1),
-    );
-    _resize = CurvedAnimation(
-      parent: widget.route.animation!,
-      curve: const Interval(0.25, 0.5),
-      reverseCurve: const Threshold(0),
-    );
-  }
-
-  @override
-  Widget build(BuildContext context) {
-    assert(debugCheckHasFluentTheme(context));
-    assert(debugCheckHasFluentLocalizations(context));
-    // The menu is shown in three stages (unit timing in brackets):
-    // [0s - 0.25s] - Fade in a rect-sized menu container with the selected item.
-    // [0.25s - 0.5s] - Grow the otherwise empty menu container from the center
-    //   until it's big enough for as many items as we're going to show.
-    // [0.5s - 1.0s] Fade in the remaining visible items from top to bottom.
-    //
-    // When the menu is dismissed we just fade the entire thing out
-    // in the first 0.25s.
-    final route = widget.route;
-
-    final theme = FluentTheme.of(context);
-
-    return AnimatedBuilder(
-      animation: widget.route.animation!,
-      builder: (context, child) {
-        return FadeTransition(
-          opacity: _fadeOpacity,
-          child: CustomPaint(
-            painter: _ComboBoxMenuPainter(
-              selectedIndex: route.selectedIndex,
-              resize: _resize,
-              scaledItemHeight: route.scaledItemHeight,
-              // This offset is passed as a callback, not a value, because it must
-              // be retrieved at paint time (after layout), not at build time.
-              getSelectedItemOffset: () =>
-                  route.getItemOffset(route.selectedIndex ?? 0),
-              // elevation: route.elevation.toDouble(),
-              borderColor: theme.resources.surfaceStrokeColorFlyout,
-              backgroundColor: widget.popupColor,
-              elevation: route.elevation,
-            ),
-            child: ClipRRect(
-              clipper: _ComboBoxResizeClipper(
-                resizeAnimation: _resize,
-                scaledItemHeight: route.scaledItemHeight,
-                getSelectedItemOffset: () =>
-                    route.getItemOffset(route.selectedIndex ?? 0),
-              ),
-              child: child,
-            ),
-          ),
-        );
-      },
-      child: Acrylic(
-        tintAlpha: 1,
-        shape: const RoundedRectangleBorder(
-          borderRadius: BorderRadius.all(kComboBoxRadius),
-        ),
-        child: ColoredBox(
-          color: theme.menuColor.withValues(alpha: kMenuColorOpacity),
-          child: Semantics(
-            scopesRoute: true,
-            namesRoute: true,
-            explicitChildNodes: true,
-            label: FluentLocalizations.of(context).dialogLabel,
-            child: DefaultTextStyle.merge(
-              style: route.style,
-              child: ScrollConfiguration(
-                behavior: const _ComboBoxScrollBehavior(),
-                child: PrimaryScrollController(
-                  controller: widget.route.scrollController!,
-                  child: ListView.builder(
-                    primary: true,
-                    itemCount: route.items.length,
-                    padding: _kListPadding,
-                    shrinkWrap: true,
-                    itemBuilder: (context, index) {
-                      final Widget container = _ComboBoxItemContainer(
-                        child: _ComboBoxItemButton<T>(
-                          route: widget.route,
-                          padding: widget.padding,
-                          buttonRect: widget.buttonRect,
-                          constraints: widget.constraints,
-                          itemIndex: index,
-                        ),
-                      );
-                      return container;
-                    },
-                  ),
-                ),
-              ),
-            ),
-          ),
-        ),
-      ),
-    );
-  }
-}
-
-class _ComboBoxResizeClipper extends CustomClipper<RRect> {
-  final Animation<double> resizeAnimation;
-  final ValueGetter<double> getSelectedItemOffset;
-  final double scaledItemHeight;
-
-  const _ComboBoxResizeClipper({
-    required this.resizeAnimation,
-    required this.getSelectedItemOffset,
-    required this.scaledItemHeight,
+/// An item in a menu created by a [ComboBox].
+///
+/// The type `T` is the type of the value the entry represents. All the entries
+/// in a given menu must represent values with consistent types.
+class ComboBoxItem<T> extends _ComboBoxItemContainer {
+  /// Creates an item for a combo box menu.
+  const ComboBoxItem({
+    required super.child,
+    super.key,
+    this.onTap,
+    this.value,
+    this.enabled = true,
+    this.searchLabel,
   });
 
-  @override
-  RRect getClip(Size size) {
-    final selectedItemOffset = getSelectedItemOffset();
-    final maxTopOffset = math.max<double>(0, size.height - scaledItemHeight);
-    final minBottomOffset = math.min(scaledItemHeight, size.height);
-    final top = Tween<double>(
-      begin: clampDouble(selectedItemOffset, 0, maxTopOffset),
-      end: 0,
-    );
+  /// Called when the combo box menu item is tapped.
+  final VoidCallback? onTap;
 
-    final bottom = Tween<double>(
-      begin: clampDouble(
-        top.begin! + scaledItemHeight,
-        minBottomOffset,
-        size.height,
-      ),
-      end: size.height,
-    );
+  /// The value to return if the user selects this menu item.
+  final T? value;
 
-    return RRect.fromRectAndRadius(
-      Rect.fromLTWH(
-        -10,
-        top.evaluate(resizeAnimation),
-        size.width + 10,
-        bottom.evaluate(resizeAnimation),
-      ),
-      kComboBoxRadius,
-    );
-  }
+  /// Whether this item is enabled.
+  final bool enabled;
 
-  @override
-  bool shouldReclip(CustomClipper<RRect> oldClipper) => true;
+  /// The text used by keyboard type-ahead search.
+  ///
+  /// This is useful when [child] is a custom widget. If it is null, a direct
+  /// [Text] child is used when one is available.
+  final String? searchLabel;
 }
 
-class _ComboBoxMenuRouteLayout<T> extends SingleChildLayoutDelegate {
-  _ComboBoxMenuRouteLayout({
-    required this.buttonRect,
-    required this.route,
+class _ComboBoxPopupLayout extends SingleChildLayoutDelegate {
+  const _ComboBoxPopupLayout({
+    required this.anchorRect,
+    required this.bounds,
+    required this.popupConstraints,
+    required this.preferredWidth,
     required this.textDirection,
+    required this.selectedIndex,
+    required this.estimatedItemHeight,
+    required this.scrollOffset,
   });
 
-  final Rect buttonRect;
-  final _ComboBoxRoute<T> route;
-  final TextDirection? textDirection;
+  final Rect anchorRect;
+  final Rect bounds;
+  final BoxConstraints? popupConstraints;
+  final double preferredWidth;
+  final TextDirection textDirection;
+  final int? selectedIndex;
+  final double estimatedItemHeight;
+  final double scrollOffset;
 
   @override
   BoxConstraints getConstraintsForChild(BoxConstraints constraints) {
-    // The maximum height of a simple menu should be one or more rows less than
-    // the view height. This ensures a tappable area outside of the simple menu
-    // with which to dismiss the menu.
-    //   -- https://material.io/design/components/menus.html#usage
-    final double maxHeight = math.max(
-      0,
-      constraints.maxHeight - 2 * route.scaledItemHeight,
+    final availableWidth = math.max<double>(0, bounds.width);
+    final availableHeight = math.max<double>(0, bounds.height);
+    final requested = popupConstraints;
+    final requestedMinWidth = requested?.minWidth ?? 0;
+    final desiredWidth = math.max<double>(preferredWidth, requestedMinWidth);
+    final maxWidth = math.min<double>(
+      availableWidth,
+      requested?.hasBoundedWidth ?? false
+          ? math.min(requested!.maxWidth, desiredWidth)
+          : desiredWidth,
     );
-    // The width of a menu should be at most the view width. This ensures that
-    // the menu does not extend past the left and right edges of the screen.
-    final double width = math.min(constraints.maxWidth, buttonRect.width);
+    final maxHeight = math.min<double>(
+      availableHeight,
+      requested?.hasBoundedHeight ?? false
+          ? requested!.maxHeight
+          : availableHeight,
+    );
+    final minWidth = math.min<double>(
+      maxWidth,
+      math.max<double>(
+        requested?.minWidth ?? 0,
+        math.min<double>(anchorRect.width, maxWidth),
+      ),
+    );
+    final minHeight = math.min<double>(maxHeight, requested?.minHeight ?? 0);
+
     return BoxConstraints(
-      minWidth: width,
-      maxWidth: width,
+      minWidth: minWidth,
+      maxWidth: maxWidth,
+      minHeight: minHeight,
       maxHeight: maxHeight,
     );
   }
 
   @override
   Offset getPositionForChild(Size size, Size childSize) {
-    final menuLimits = route.getMenuLimits(
-      buttonRect,
-      size.height,
-      route.selectedIndex ?? 0,
-    );
-    final top = clampDouble(
-      menuLimits.top,
-      0,
-      math.max(0, size.height - childSize.height),
-    );
-
-    assert(() {
-      final container = Offset.zero & size;
-      if (container.intersect(buttonRect) == buttonRect) {
-        // If the button was entirely on-screen, then verify
-        // that the menu is also on-screen.
-        // If the button was a bit off-screen, then, oh well.
-        assert(top >= 0.0);
-        assert(top + childSize.height <= size.height);
-      }
-      return true;
-    }());
-    assert(textDirection != null);
-    final double left;
-    switch (textDirection!) {
-      case TextDirection.rtl:
-        left = clampDouble(buttonRect.right, 0, size.width) - childSize.width;
-      case TextDirection.ltr:
-        left = clampDouble(buttonRect.left, 0, size.width - childSize.width);
+    final maximumLeft = math.max(bounds.left, bounds.right - childSize.width);
+    final preferredLeft = textDirection == TextDirection.rtl
+        ? anchorRect.right - childSize.width
+        : anchorRect.left;
+    final left = clampDouble(preferredLeft, bounds.left, maximumLeft);
+
+    final double preferredTop;
+    if (selectedIndex == null) {
+      final below = anchorRect.bottom;
+      final above = anchorRect.top - childSize.height;
+      preferredTop =
+          below + childSize.height <= bounds.bottom || below <= bounds.top
+          ? below
+          : above;
+    } else {
+      final selectedStart =
+          _kListPadding.top +
+          selectedIndex! * estimatedItemHeight -
+          scrollOffset;
+      final selectedCenter = selectedStart + estimatedItemHeight / 2;
+      preferredTop = anchorRect.center.dy - selectedCenter;
     }
 
+    final maximumTop = math.max(bounds.top, bounds.bottom - childSize.height);
+    final top = clampDouble(preferredTop, bounds.top, maximumTop);
     return Offset(left, top);
   }
 
   @override
-  bool shouldRelayout(_ComboBoxMenuRouteLayout<T> oldDelegate) {
-    return buttonRect != oldDelegate.buttonRect ||
-        textDirection != oldDelegate.textDirection;
+  bool shouldRelayout(_ComboBoxPopupLayout oldDelegate) {
+    return anchorRect != oldDelegate.anchorRect ||
+        bounds != oldDelegate.bounds ||
+        popupConstraints != oldDelegate.popupConstraints ||
+        preferredWidth != oldDelegate.preferredWidth ||
+        textDirection != oldDelegate.textDirection ||
+        selectedIndex != oldDelegate.selectedIndex ||
+        estimatedItemHeight != oldDelegate.estimatedItemHeight ||
+        scrollOffset != oldDelegate.scrollOffset;
   }
 }
 
-// We box the return value so that the return value can be null. Otherwise,
-// canceling the route (which returns null) would get confused with actually
-// returning a real null value.
-@immutable
-class _ComboBoxRouteResult<T> {
-  const _ComboBoxRouteResult(this.result);
-
-  final T? result;
-
-  @override
-  bool operator ==(Object other) {
-    return other is _ComboBoxRouteResult<T> && other.result == result;
-  }
-
-  @override
-  int get hashCode => result.hashCode;
-}
-
-class _MenuLimits {
-  const _MenuLimits(this.top, this.bottom, this.height, this.scrollOffset);
-  final double top;
-  final double bottom;
-  final double height;
-  final double scrollOffset;
-}
-
-class _ComboBoxRoute<T> extends PopupRoute<_ComboBoxRouteResult<T>> {
-  _ComboBoxRoute({
+class _ComboBoxPopup<T> extends StatefulWidget {
+  const _ComboBoxPopup({
     required this.items,
-    required this.padding,
-    required this.buttonRect,
     required this.selectedIndex,
-    required this.capturedThemes,
+    required this.activeIndex,
+    required this.animationIndex,
+    required this.keyboardActiveIndex,
+    required this.itemPadding,
     required this.style,
-    required this.acrylicEnabled,
-    required TextScaler textScaler,
-    this.elevation = 16,
-    this.barrierLabel,
-    this.popupColor,
-  }) : scaledItemHeight = textScaler.scale(kComboBoxItemHeight),
-       itemHeights = List<double>.filled(
-         items.length,
-         textScaler.scale(kComboBoxItemHeight),
-       );
+    required this.popupColor,
+    required this.elevation,
+    required this.animation,
+    required this.scrollController,
+    required this.anchorCenterGlobalY,
+    required this.searchLabel,
+    required this.onActiveChanged,
+    required this.onSelected,
+    super.key,
+  });
 
   final List<ComboBoxItem<T>> items;
-  final EdgeInsetsGeometry padding;
-  final Rect buttonRect;
   final int? selectedIndex;
-  final int elevation;
-  final CapturedThemes capturedThemes;
+  final int? activeIndex;
+  final int? animationIndex;
+  final int? keyboardActiveIndex;
+  final EdgeInsets itemPadding;
   final TextStyle style;
   final Color? popupColor;
-  final bool acrylicEnabled;
-
-  final double scaledItemHeight;
-  final List<double> itemHeights;
-  ScrollController? scrollController;
-
-  @override
-  Duration get transitionDuration => _kComboBoxMenuDuration;
-
-  @override
-  bool get barrierDismissible => true;
+  final int elevation;
+  final AnimationController animation;
+  final ScrollController scrollController;
+  final double anchorCenterGlobalY;
+  final String? Function(ComboBoxItem<T>) searchLabel;
+  final ValueChanged<int> onActiveChanged;
+  final ValueChanged<int> onSelected;
 
   @override
-  Color? get barrierColor => null;
+  State<_ComboBoxPopup<T>> createState() => _ComboBoxPopupState<T>();
+}
 
-  @override
-  final String? barrierLabel;
+class _ComboBoxPopupState<T> extends State<_ComboBoxPopup<T>> {
+  final GlobalKey _viewportKey = GlobalKey(
+    debugLabel: 'ComboBox popup viewport',
+  );
+  final GlobalKey _activeItemKey = GlobalKey(
+    debugLabel: 'ComboBox active item',
+  );
+  int _correctionAttempts = 0;
+  late final CurvedAnimation _fade;
+  late final CurvedAnimation _resize;
 
   @override
-  Widget buildPage(
-    BuildContext context,
-    Animation<double> animation,
-    Animation<double> secondaryAnimation,
-  ) {
-    return LayoutBuilder(
-      builder: (context, constraints) {
-        final page = _ComboBoxRoutePage<T>(
-          route: this,
-          constraints: constraints,
-          padding: padding,
-          buttonRect: buttonRect,
-          selectedIndex: selectedIndex,
-          elevation: elevation,
-          capturedThemes: capturedThemes,
-          style: style,
-          popupColor: popupColor,
-        );
-        if (acrylicEnabled) return page;
-        return DisableAcrylic(child: page);
-      },
+  void initState() {
+    super.initState();
+    _fade = CurvedAnimation(
+      parent: widget.animation,
+      curve: const Interval(0, .25),
+      reverseCurve: const Interval(.75, 1),
     );
+    _resize = CurvedAnimation(
+      parent: widget.animation,
+      curve: const Interval(.25, .5),
+      reverseCurve: const Threshold(0),
+    );
+    WidgetsBinding.instance.addPostFrameCallback((_) {
+      if (mounted && widget.animation.value < 1) {
+        widget.animation.forward(from: 0);
+      }
+    });
+    _scheduleCorrection();
   }
 
-  void _dismiss() {
-    if (isActive) {
-      navigator?.removeRoute(this);
-    }
-  }
-
-  double getItemOffset(int index) {
-    var offset = _kListPadding.top;
-    if (items.isNotEmpty && index > 0) {
-      assert(items.length == itemHeights.length);
-      offset += itemHeights
-          .sublist(0, index)
-          .reduce((total, height) => total + height);
+  @override
+  void didUpdateWidget(covariant _ComboBoxPopup<T> oldWidget) {
+    super.didUpdateWidget(oldWidget);
+    if (oldWidget.anchorCenterGlobalY != widget.anchorCenterGlobalY ||
+        oldWidget.scrollController != widget.scrollController) {
+      _scheduleCorrection();
     }
-    return offset;
   }
 
-  // Returns the vertical extent of the menu and the initial scrollOffset
-  // for the ListView that contains the menu items. The vertical center of the
-  // selected item is aligned with the button's vertical center, as far as
-  // that's possible given availableHeight.
-  _MenuLimits getMenuLimits(
-    Rect buttonRect,
-    double availableHeight,
-    int index,
-  ) {
-    final computedMaxHeight = availableHeight - 2.0 * scaledItemHeight;
-    // if (menuMaxHeight != null) {
-    //   computedMaxHeight = math.min(computedMaxHeight, menuMaxHeight!);
-    // }
-    final buttonTop = buttonRect.top;
-    final double buttonBottom = math.min(buttonRect.bottom, availableHeight);
-    final selectedItemOffset = getItemOffset(index);
-
-    // If the button is placed on the bottom or top of the screen, its top or
-    // bottom may be less than [kComboBoxItemHeightWithPadding] from the edge of the screen.
-    // In this case, we want to change the menu limits to align with the top
-    // or bottom edge of the button.
-    const topLimit = _kMenuItemBottomPadding;
-    final double bottomLimit = math.max(
-      availableHeight - scaledItemHeight,
-      buttonBottom,
-    );
-
-    var menuTop =
-        (buttonTop - selectedItemOffset) -
-        (itemHeights[selectedIndex ?? 0] - buttonRect.height) / 2.0;
-
-    var preferredMenuHeight = _kListPadding.vertical;
-    if (items.isNotEmpty) {
-      preferredMenuHeight += itemHeights.reduce(
-        (total, height) => total + height,
-      );
-    }
-    // If there are too many elements in the menu, we need to shrink it down
-    // so it is at most the computedMaxHeight.
-    final double menuHeight = math.min(computedMaxHeight, preferredMenuHeight);
-    var menuBottom = menuTop + menuHeight;
-
-    // If the computed top or bottom of the menu are outside of the range
-    // specified, we need to bring them into range. If the item height is larger
-    // than the button height and the button is at the very bottom or top of the
-    // screen, the menu will be aligned with the bottom or top of the button
-    // respectively.
-    if (menuTop < topLimit) {
-      menuTop = math.min(buttonTop, topLimit);
-      menuBottom = menuTop + menuHeight;
-    }
-
-    if (menuBottom > bottomLimit) {
-      menuBottom = math.max(buttonBottom, bottomLimit);
-      menuTop = menuBottom - menuHeight;
-    }
-
-    if (menuBottom - itemHeights[selectedIndex ?? 0] / 2.0 <
-        buttonBottom - buttonRect.height / 2.0) {
-      menuBottom =
-          buttonBottom -
-          buttonRect.height / 2.0 +
-          itemHeights[selectedIndex ?? 0] / 2.0;
-      menuTop = menuBottom - menuHeight;
-    }
-
-    var scrollOffset = 0.0;
-    // If all of the menu items will not fit within availableHeight then
-    // compute the scroll offset that will line the selected menu item up
-    // with the select item. This is only done when the menu is first
-    // shown - subsequently we leave the scroll offset where the user left
-    // it. This scroll offset is only accurate for fixed height menu items
-    // (the default).
-    if (preferredMenuHeight > computedMaxHeight) {
-      // The offset should be zero if the selected item is in view at the beginning
-      // of the menu. Otherwise, the scroll offset should center the item if possible.
-      scrollOffset = math.max(0, selectedItemOffset - (buttonTop - menuTop));
-      // If the selected item's scroll offset is greater than the maximum scroll offset,
-      // set it instead to the maximum allowed scroll offset.
-      scrollOffset = math.min(scrollOffset, preferredMenuHeight - menuHeight);
-    }
-
-    assert((menuBottom - menuTop - menuHeight).abs() < precisionErrorTolerance);
-    return _MenuLimits(menuTop, menuBottom, menuHeight, scrollOffset);
+  @override
+  void dispose() {
+    _fade.dispose();
+    _resize.dispose();
+    super.dispose();
   }
-}
 
-class _ComboBoxRoutePage<T> extends StatelessWidget {
-  const _ComboBoxRoutePage({
-    required this.route,
-    required this.constraints,
-    required this.padding,
-    required this.buttonRect,
-    required this.selectedIndex,
-    required this.capturedThemes,
-    required this.popupColor,
-    super.key,
-    this.elevation = 8,
-    this.style,
-  });
+  void ensureActiveVisible() => _scheduleCorrection();
 
-  final _ComboBoxRoute<T> route;
-  final BoxConstraints constraints;
-  final EdgeInsetsGeometry padding;
-  final Rect buttonRect;
-  final int? selectedIndex;
-  final int elevation;
-  final CapturedThemes capturedThemes;
-  final TextStyle? style;
-  final Color? popupColor;
-
-  @override
-  Widget build(BuildContext context) {
-    assert(debugCheckHasDirectionality(context));
-
-    // Computing the initialScrollOffset now, before the items have been laid
-    // out. This only works if the item heights are effectively fixed, i.e. either
-    // ComboBox.itemHeight is specified or ComboBox.itemHeight is null
-    // and all of the items' intrinsic heights are less than kItemHeight.
-    // Otherwise the initialScrollOffset is just a rough approximation based on
-    // treating the items as if their heights were all equal to kComboBoxItemHeight.
-    if (route.scrollController == null) {
-      final menuLimits = route.getMenuLimits(
-        buttonRect,
-        constraints.maxHeight,
-        selectedIndex ?? 0,
+  void _scheduleCorrection() {
+    WidgetsBinding.instance.addPostFrameCallback((_) {
+      if (!mounted || !widget.scrollController.hasClients) return;
+      final itemContext = _activeItemKey.currentContext;
+      final viewportContext = _viewportKey.currentContext;
+      if (itemContext == null || viewportContext == null) {
+        if (_correctionAttempts++ < 5) _scheduleCorrection();
+        return;
+      }
+      _correctionAttempts = 0;
+      final itemBox = itemContext.findRenderObject();
+      final viewportBox = viewportContext.findRenderObject();
+      if (itemBox is! RenderBox || viewportBox is! RenderBox) return;
+      final itemTop = itemBox.localToGlobal(Offset.zero).dy;
+      final itemCenter = itemTop + itemBox.size.height / 2;
+      final viewportTop = viewportBox.localToGlobal(Offset.zero).dy;
+      final viewportBottom = viewportTop + viewportBox.size.height;
+      final desiredCenter = clampDouble(
+        widget.anchorCenterGlobalY,
+        viewportTop + itemBox.size.height / 2,
+        viewportBottom - itemBox.size.height / 2,
       );
-      route.scrollController = ScrollController(
-        initialScrollOffset: menuLimits.scrollOffset,
-        keepScrollOffset: false,
+      final target = clampDouble(
+        widget.scrollController.offset + itemCenter - desiredCenter,
+        widget.scrollController.position.minScrollExtent,
+        widget.scrollController.position.maxScrollExtent,
       );
-    }
-
-    final textDirection = Directionality.maybeOf(context);
-    final Widget menu = _ComboBoxMenu<T>(
-      route: route,
-      padding: padding.resolve(textDirection),
-      buttonRect: buttonRect,
-      constraints: constraints,
-      popupColor: popupColor,
-    );
+      if ((target - widget.scrollController.offset).abs() > .5) {
+        widget.scrollController.jumpTo(target);
+      }
+    });
+  }
 
-    return MediaQuery.removePadding(
-      context: context,
-      removeTop: true,
-      removeBottom: true,
-      removeLeft: true,
-      removeRight: true,
-      child: CustomSingleChildLayout(
-        delegate: _ComboBoxMenuRouteLayout<T>(
-          buttonRect: buttonRect,
-          route: route,
-          textDirection: textDirection,
-        ),
-        child: capturedThemes.wrap(menu),
+  Widget _buildItem(BuildContext context, int index) {
+    final item = widget.items[index];
+    final isActive = widget.activeIndex == index;
+    final isSelected = widget.selectedIndex == index;
+    final isKeyboardActive = widget.keyboardActiveIndex == index;
+    final showSelectionIndicator = isSelected || isKeyboardActive;
+    final foregroundColor = isActive
+        ? FluentTheme.of(context).resources.textFillColorPrimary
+        : null;
+
+    final semantics = Semantics(
+      button: true,
+      enabled: item.enabled,
+      selected: isSelected,
+      focused: isActive,
+      label: widget.searchLabel(item),
+      child: HoverButton(
+        focusEnabled: false,
+        actionsEnabled: false,
+        onPointerEnter: item.enabled
+            ? (_) => widget.onActiveChanged(index)
+            : null,
+        onPressed: item.enabled ? () => widget.onSelected(index) : null,
+        builder: (context, states) {
+          final theme = FluentTheme.of(context);
+          final visualStates = <WidgetState>{
+            ...states,
+            if (isActive) WidgetState.focused,
+          };
+          final background = ButtonThemeData.uncheckedInputColor(
+            theme,
+            visualStates,
+            transparentWhenNone: true,
+          );
+          return Padding(
+            padding: const EdgeInsetsDirectional.symmetric(horizontal: 6),
+            child: Stack(
+              children: [
+                Container(
+                  width: double.infinity,
+                  decoration: BoxDecoration(
+                    color: background,
+                    borderRadius: BorderRadius.circular(4),
+                  ),
+                  padding: EdgeInsetsDirectional.only(
+                    start: widget.itemPadding.left,
+                    end: widget.itemPadding.right + (isSelected ? 24 : 0),
+                  ),
+                  child: DefaultTextStyle.merge(
+                    style: widget.style.copyWith(color: foregroundColor),
+                    child: IconTheme.merge(
+                      data: IconThemeData(color: foregroundColor),
+                      child: _ComboBoxItemContainer(child: item.child),
+                    ),
+                  ),
+                ),
+                if (showSelectionIndicator)
+                  PositionedDirectional(
+                    top: states.isPressed ? 10 : 8,
+                    bottom: states.isPressed ? 10 : 8,
+                    start: 0,
+                    child: Container(
+                      key: const ValueKey('combo-box-selection-indicator'),
+                      width: 3,
+                      decoration: BoxDecoration(
+                        color: theme.accentColor.defaultBrushFor(
+                          theme.brightness,
+                        ),
+                        borderRadius: BorderRadius.circular(50),
+                      ),
+                    ),
+                  ),
+                if (isSelected)
+                  PositionedDirectional(
+                    end: 8,
+                    top: 0,
+                    bottom: 0,
+                    child: Center(
+                      child: WindowsIcon(
+                        WindowsIcons.check_mark,
+                        size: 10,
+                        color: theme.resources.textFillColorPrimary,
+                      ),
+                    ),
+                  ),
+              ],
+            ),
+          );
+        },
       ),
     );
+    return KeyedSubtree(
+      key: isActive ? _activeItemKey : null,
+      child: KeyedSubtree(key: item.key, child: semantics),
+    );
   }
-}
-
-// The container widget for a menu item created by a [ComboBox]. It
-// provides the default configuration for [ComboBoxItem]s, as well as a
-// [ComboBox]'s placeholder and disabledPlaceholder widgets.
-class _ComboBoxItemContainer extends StatelessWidget {
-  /// Creates an item for a combo box menu.
-  ///
-  /// The [child] argument is required.
-  const _ComboBoxItemContainer({required this.child, super.key});
-
-  /// The widget below this widget in the tree.
-  ///
-  /// Typically a [Text] widget.
-  final Widget child;
 
   @override
   Widget build(BuildContext context) {
     final theme = FluentTheme.of(context);
-    final hasPadding = _ContainerWithoutPadding.of(context) == null;
-    final state = HoverButton.maybeOf(context)?.states ?? <WidgetState>{};
-
-    final foregroundColor = state.isDisabled
-        ? theme.resources.textFillColorDisabled
-        : state.isPressed
-        ? theme.resources.textFillColorTertiary
-        : state.isHovered
-        ? theme.resources.textFillColorSecondary
-        : theme.resources.textFillColorPrimary;
-
-    final textScaler = MediaQuery.textScalerOf(context);
-    final densityAdjustment = theme.visualDensity.baseSizeAdjustment.dy;
-    final adjustedItemHeight = clampDouble(
-      textScaler.scale(kComboBoxItemHeight) + densityAdjustment,
-      0,
-      double.infinity,
+    final content = ScrollConfiguration(
+      behavior: const _ComboBoxScrollBehavior(),
+      child: ListView.builder(
+        key: _viewportKey,
+        controller: widget.scrollController,
+        primary: false,
+        shrinkWrap: true,
+        padding: _kListPadding,
+        itemCount: widget.items.length,
+        itemBuilder: _buildItem,
+      ),
     );
-    final itemHeight = adjustedItemHeight;
-    final buttonHeight = clampDouble(
-      adjustedItemHeight - _kMenuItemBottomPadding,
-      0,
-      double.infinity,
+    final decorated = DecoratedBox(
+      decoration: BoxDecoration(
+        border: Border.all(color: theme.resources.surfaceStrokeColorFlyout),
+        borderRadius: const BorderRadius.all(kComboBoxRadius),
+        boxShadow: kElevationToShadow[widget.elevation],
+        color: widget.popupColor ?? theme.menuColor.withValues(alpha: 1),
+      ),
+      child: ClipRRect(
+        borderRadius: const BorderRadius.all(kComboBoxRadius),
+        child: Acrylic(
+          tintAlpha: widget.popupColor == null ? 1 : 0,
+          shape: const RoundedRectangleBorder(
+            borderRadius: BorderRadius.all(kComboBoxRadius),
+          ),
+          child: DefaultTextStyle.merge(style: widget.style, child: content),
+        ),
+      ),
     );
-    return Container(
-      height: hasPadding ? itemHeight : buttonHeight,
-      alignment: AlignmentDirectional.centerStart,
-      child: DefaultTextStyle.merge(
-        style: TextStyle(color: foregroundColor),
-        child: IconTheme.merge(
-          data: IconThemeData(color: foregroundColor),
-          child: child,
+
+    return FadeTransition(
+      key: const Key('combo-box-popup-fade'),
+      opacity: _fade,
+      child: ClipRect(
+        key: const Key('combo-box-popup-reveal'),
+        clipper: _ComboBoxRevealClipper(
+          animation: _resize,
+          selectedIndex: widget.animationIndex,
+          scrollController: widget.scrollController,
+          estimatedItemHeight: _comboBoxEstimatedItemHeight(
+            context,
+            widget.style,
+          ),
         ),
+        child: decorated,
       ),
     );
   }
 }
 
-class _ContainerWithoutPadding extends InheritedWidget {
-  const _ContainerWithoutPadding({required super.child});
+class _ComboBoxRevealClipper extends CustomClipper<Rect> {
+  const _ComboBoxRevealClipper({
+    required this.animation,
+    required this.selectedIndex,
+    required this.scrollController,
+    required this.estimatedItemHeight,
+  }) : super(reclip: animation);
 
-  static _ContainerWithoutPadding? of(BuildContext context) {
-    return context
-        .dependOnInheritedWidgetOfExactType<_ContainerWithoutPadding>();
-  }
+  final Animation<double> animation;
+  final int? selectedIndex;
+  final ScrollController scrollController;
+  final double estimatedItemHeight;
 
   @override
-  bool updateShouldNotify(_ContainerWithoutPadding oldWidget) {
-    return true;
+  Rect getClip(Size size) {
+    if (selectedIndex == null) return Offset.zero & size;
+    final selectedTop = clampDouble(
+      _kListPadding.top +
+          selectedIndex! * estimatedItemHeight -
+          scrollController.initialScrollOffset,
+      0,
+      math.max(0, size.height - estimatedItemHeight),
+    );
+    final selectedBottom = math.min(
+      size.height,
+      selectedTop + estimatedItemHeight,
+    );
+    return Rect.fromLTRB(
+      0,
+      Tween<double>(begin: selectedTop, end: 0).evaluate(animation),
+      size.width,
+      Tween<double>(
+        begin: selectedBottom,
+        end: size.height,
+      ).evaluate(animation),
+    );
   }
-}
-
-/// An item in a menu created by a [ComboBox].
-///
-/// The type `T` is the type of the value the entry represents. All the entries
-/// in a given menu must represent values with consistent types.
-class ComboBoxItem<T> extends _ComboBoxItemContainer {
-  /// Creates an item for a combo box menu.
-  ///
-  /// The [child] argument is required.
-  const ComboBoxItem({
-    required super.child,
-    super.key,
-    this.onTap,
-    this.value,
-    this.enabled = true,
-  });
-
-  /// Called when the combo box menu item is tapped.
-  final VoidCallback? onTap;
 
-  /// The value to return if the user selects this menu item.
-  ///
-  /// Eventually returned in a call to [ComboBox.onChanged].
-  final T? value;
-
-  /// Whether this item is enabled.
-  final bool enabled;
+  @override
+  bool shouldReclip(_ComboBoxRevealClipper oldClipper) =>
+      oldClipper.animation != animation ||
+      oldClipper.selectedIndex != selectedIndex ||
+      oldClipper.scrollController != scrollController;
 }
 
 /// A combo box (also known as a drop-down list) lets the user select from a
 /// list of items.
 ///
-/// The combo box displays the currently selected item and shows an arrow that,
-/// when clicked, opens a dropdown menu for selecting another item. This is useful
-/// when you have a large set of options or when screen space is limited.
-///
-/// ![ComboBox Popup preview](https://learn.microsoft.com/en-us/windows/apps/design/controls/images/combo-box-list-item-state.png)
-///
-/// {@tool snippet}
-/// This example shows a basic combo box with a list of colors:
-///
-/// ```dart
-/// String? selectedColor;
-///
-/// ComboBox<String>(
-///   value: selectedColor,
-///   items: ['Red', 'Green', 'Blue'].map((color) {
-///     return ComboBoxItem<String>(
-///       value: color,
-///       child: Text(color),
-///     );
-///   }).toList(),
-///   onChanged: (value) => setState(() => selectedColor = value),
-///   placeholder: Text('Select a color'),
-/// )
-/// ```
-/// {@end-tool}
-///
-/// {@tool snippet}
-/// This example shows a combo box with an enum:
-///
-/// ```dart
-/// enum Priority { low, medium, high }
-///
-/// Priority? selectedPriority;
-///
-/// ComboBox<Priority>(
-///   value: selectedPriority,
-///   items: Priority.values.map((priority) {
-///     return ComboBoxItem<Priority>(
-///       value: priority,
-///       child: Text(priority.name),
-///     );
-///   }).toList(),
-///   onChanged: (value) => setState(() => selectedPriority = value),
-/// )
-/// ```
-/// {@end-tool}
-///
-/// The type `T` is the type of the [value] that each combo box item represents.
-/// All the entries in a given menu must represent values with consistent types.
-/// Typically, an enum is used. Each [ComboBoxItem] in [items] must be
-/// specialized with that same type argument.
-///
-/// The [onChanged] callback should update a state variable that defines the
-/// combo box's value. It should also call [State.setState] to rebuild the
-/// combo box with the new value.
-///
-/// If the [onChanged] callback is null or the list of [items] is null
-/// then the combo box button will be disabled—its arrow will be displayed in
-/// grey and it will not respond to input.
-///
-/// See also:
-///
-///  * [ComboBoxItem], the class used to represent the [items]
-///  * [EditableComboBox], a combo box that allows text input
-///  * [AutoSuggestBox], a text box with suggestion dropdown
-///  * <https://learn.microsoft.com/en-us/windows/apps/design/controls/combo-box>
+/// The popup is rendered in the nearest [Overlay] using [OverlayPortal]. This
+/// keeps a popup attached to a dialog or nested overlay while it is open.
 class ComboBox<T> extends StatefulWidget {
   /// Creates a combo box button.
-  ///
-  /// The [items] must have distinct values. If [value] isn't null then it
-  /// must be equal to one of the [ComboBoxItem] values. If [items] or
-  /// [onChanged] is null, the button will be disabled, the down arrow
-  /// will be greyed out.
-  ///
-  /// If [value] is null and the button is enabled, [placeholder] will be displayed
-  /// if it is non-null.
-  ///
-  /// If [value] is null and the button is disabled, [disabledPlaceholder] will be displayed
-  /// if it is non-null. If [disabledPlaceholder] is null, then [placeholder] will be displayed
-  /// if it is non-null.
-  ///
-  /// The [elevation] and [iconSize] arguments must not be null (they both have
-  /// defaults, so do not need to be specified). The [isExpanded] arguments must
-  /// not be null.
-  ///
-  /// The [autofocus] argument must not be null.
-  ///
-  /// The [popupColor] argument specifies the background color of the
-  /// combo box when it is open. If it is null, the default [Acrylic] color is used.
   const ComboBox({
     required this.items,
     super.key,
@@ -981,6 +573,8 @@ class ComboBox<T> extends StatefulWidget {
     this.disabledPlaceholder,
     this.onChanged,
     this.onTap,
+    this.onOpen,
+    this.onClose,
     this.elevation = 8,
     this.style,
     this.icon = const WindowsIcon(WindowsIcons.chevron_down),
@@ -992,368 +586,610 @@ class ComboBox<T> extends StatefulWidget {
     this.focusNode,
     this.autofocus = false,
     this.popupColor,
-    // When adding new arguments, consider adding similar arguments to
-    // ComboBoxFormField.
+    this.popupConstraints,
   });
 
   /// The list of items the user can select.
-  ///
-  /// If the [onChanged] callback is null or the list of items is null
-  /// then the combo box button will be disabled, i.e. its arrow will be
-  /// displayed in grey and it will not respond to input.
   final List<ComboBoxItem<T>>? items;
 
   /// The value of the currently selected [ComboBoxItem].
-  ///
-  /// If [value] is null and the button is enabled, [placeholder] will be displayed
-  /// if it is non-null.
-  ///
-  /// If [value] is null and the button is disabled, [disabledPlaceholder] will be displayed
-  /// if it is non-null. If [disabledPlaceholder] is null, then [placeholder] will be displayed
-  /// if it is non-null.
   final T? value;
 
-  /// A placeholder widget that is displayed by the combo box button.
-  ///
-  /// If [value] is null and the combo box is enabled ([items] and [onChanged] are non-null),
-  /// this widget is displayed as a placeholder for the combo box button's value.
-  ///
-  /// If [value] is null and the combo box is disabled and [disabledPlaceholder] is null,
-  /// this widget is used as the placeholder.
+  /// A placeholder displayed when no item is selected.
   final Widget? placeholder;
 
-  /// A preferred placeholder widget that is displayed when the combo box is disabled.
-  ///
-  /// If [value] is null, the combo box is disabled ([items] or [onChanged] is null),
-  /// this widget is displayed as a placeholder for the combo box button's value.
+  /// A placeholder displayed when the combo box is disabled and empty.
   final Widget? disabledPlaceholder;
 
   /// Called when the user selects an item.
-  ///
-  /// If the [onChanged] callback is null or the list of [ComboBox.items]
-  /// is null then the combo box button will be disabled, i.e. its arrow will be
-  /// displayed in grey and it will not respond to input. A disabled button
-  /// will display the [ComboBox.disabledPlaceholder] widget if it is non-null.
-  /// If [ComboBox.disabledPlaceholder] is also null but [ComboBox.placeholder] is
-  /// non-null, [ComboBox.placeholder] will instead be displayed.
   final ValueChanged<T?>? onChanged;
 
-  /// Called when the combo box button is tapped.
-  ///
-  /// This is distinct from [onChanged], which is called when the user
-  /// selects an item from the combo box.
-  ///
-  /// The callback will not be invoked if the combo box button is disabled.
+  /// Called when the combo box control is tapped.
   final VoidCallback? onTap;
 
-  /// A builder to customize the combo box buttons corresponding to the
-  /// [ComboBoxItem]s in [items].
-  ///
-  /// When a [ComboBoxItem] is selected, the widget that will be displayed
-  /// from the list corresponds to the [ComboBoxItem] of the same index
-  /// in [items].
-  ///
-  /// This sample shows a `ComboBox` with a button with [Text] that
-  /// corresponds to but is unique from [ComboBoxItem].
-  ///
-  /// ```dart
-  /// final List<String> items = <String>['1','2','3'];
-  /// String selectedItem = '1';
-  ///
-  /// @override
-  /// Widget build(BuildContext context) {
-  ///   return Padding(
-  ///     padding: const EdgeInsetsDirectional.symmetric(horizontal: 12.0),
-  ///     child: ComboBox<String>(
-  ///       value: selectedItem,
-  ///       onChanged: (String? string) => setState(() => selectedItem = string!),
-  ///       selectedItemBuilder: (BuildContext context) {
-  ///         return items.map<Widget>((String item) {
-  ///           return Text(item);
-  ///         }).toList();
-  ///       },
-  ///       items: items.map((String item) {
-  ///         return ComboBoxItem<String>(
-  ///           child: Text('Log $item'),
-  ///           value: item,
-  ///         );
-  ///       }).toList(),
-  ///     ),
-  ///   );
-  /// }
-  /// ```
-  ///
-  /// If this callback is null, the [ComboBoxItem] from [items]
-  /// that matches [value] will be displayed.
-  final ComboBoxBuilder? selectedItemBuilder;
+  /// Called once after the popup starts opening.
+  final VoidCallback? onOpen;
 
-  /// The z-coordinate at which to place the menu when open.
-  ///
-  /// The following elevations have defined shadows: 1, 2, 3, 4, 6, 8, 9, 12,
-  /// 16, and 24. See [kElevationToShadow].
-  ///
-  /// Defaults to 8, the appropriate elevation for combo box buttons.
+  /// Called once after an opened popup finishes closing.
+  final VoidCallback? onClose;
+
+  /// The z-coordinate at which to place the popup when open.
   final int elevation;
 
-  /// The text style to use for text in the combo box button and the combo box
-  /// menu that appears when you tap the button.
-  ///
-  /// To use a separate text style for selected item when it's displayed within
-  /// the combo box button, consider using [selectedItemBuilder].
-  ///
-  /// This sample shows a `ComboBox` with a combo box button text style
-  /// that is different than its menu items.
-  ///
-  /// ```dart
-  /// List<String> options = <String>['One', 'Two', 'Free', 'Four'];
-  /// String comboboxValue = 'One';
-  ///
-  /// @override
-  /// Widget build(BuildContext context) {
-  ///   return Container(
-  ///     alignment: AlignmentDirectional.center,
-  ///     color: Colors.blue,
-  ///     child: ComboBox<String>(
-  ///       value: comboboxValue,
-  ///       onChanged: (String? newValue) {
-  ///         setState(() {
-  ///           comboboxValue = newValue!;
-  ///         });
-  ///       },
-  ///       style: TextStyle(color: Colors.blue),
-  ///       selectedItemBuilder: (BuildContext context) {
-  ///         return options.map((String value) {
-  ///           return Text(
-  ///             comboboxValue,
-  ///             style: TextStyle(color: Colors.white),
-  ///           );
-  ///         }).toList();
-  ///       },
-  ///       items: options.map<ComboBoxItem<String>>((String value) {
-  ///         return ComboBoxItem<String>(
-  ///           value: value,
-  ///           child: Text(value),
-  ///         );
-  ///       }).toList(),
-  ///     ),
-  ///   );
-  /// }
-  /// ```
-  ///
-  /// Defaults to the [Typography.body] value of the closest [FluentThemeData]
+  /// The text style used by the control and popup items.
   final TextStyle? style;
 
-  /// The widget to use for the comobo box button's icon.
-  ///
-  /// Defaults to an [Icon] with the [WindowsIcons.chevron_down] glyph.
+  /// The icon displayed at the end of the control.
   final Widget icon;
 
-  /// The color of any [Icon] descendant of [icon] if this button is disabled,
-  /// i.e. if [onChanged] is null.
+  /// The color of an icon when the control is disabled.
   final Color? iconDisabledColor;
 
-  /// The color of any [Icon] descendant of [icon] if this button is enabled,
-  /// i.e. if [onChanged] is defined.
+  /// The color of an icon when the control is enabled.
   final Color? iconEnabledColor;
 
-  /// The size to use for the checkbox button's down arrow icon button.
-  ///
-  /// Defaults to 12.0
+  /// The size used for the control icon.
   final double iconSize;
 
-  /// Set the combo box's inner contents to horizontally fill its parent.
-  ///
-  /// By default this button's inner width is the minimum size of its contents.
-  /// If [isExpanded] is true, the inner width is expanded to fill its
-  /// surrounding container.
+  /// Whether the control fills the width available to it.
   final bool isExpanded;
 
-  /// The color for the button's [Material] when it has the input focus.
+  /// The color used for the control's focused state.
   final Color? focusColor;
 
-  /// {@macro flutter.widgets.Focus.focusNode}
+  /// The focus node used by the control.
   final FocusNode? focusNode;
 
-  /// {@macro flutter.widgets.Focus.autofocus}
+  /// Whether the control requests focus when it is first built.
   final bool autofocus;
 
-  /// The background color of the combo box menu.
-  ///
-  /// If it is not provided, the default [Acrylic] color is used.
+  /// The background color of the popup.
   final Color? popupColor;
 
+  /// Optional popup size constraints.
+  ///
+  /// The constraints are intersected with the available overlay bounds. The
+  /// popup can therefore never extend outside the application viewport.
+  final BoxConstraints? popupConstraints;
+
+  /// A builder for the selected control content.
+  final ComboBoxBuilder? selectedItemBuilder;
+
   @override
   State<ComboBox<T>> createState() => ComboBoxState<T>();
 }
 
-class ComboBoxState<T> extends State<ComboBox<T>> {
-  int? _selectedIndex;
+/// The state for a [ComboBox].
+class ComboBoxState<T> extends State<ComboBox<T>>
+    with SingleTickerProviderStateMixin {
+  final OverlayPortalController _overlayController = OverlayPortalController(
+    debugLabel: 'ComboBox popup',
+  );
+  final FocusScopeNode _popupScopeNode = FocusScopeNode(
+    debugLabel: 'ComboBox popup scope',
+  );
+  final FocusNode _popupFocusNode = FocusNode(
+    debugLabel: 'ComboBox popup focus',
+  );
+  final GlobalKey<_ComboBoxPopupState<T>> _popupKey = GlobalKey();
+  final GlobalKey _controlKey = GlobalKey(debugLabel: 'ComboBox control');
+
+  FocusNode? _internalNode;
+  ScrollController? _scrollController;
+  late final AnimationController _animationController;
+  late int? _selectedIndex;
+  int? _activeIndex;
+  int? _popupAnchorIndex;
+  double _popupAnchorScrollOffset = 0;
+  int? _keyboardActiveIndex;
+  bool _isOpen = false;
+  bool _isClosing = false;
+  bool _hasPrimaryFocus = false;
+  String _searchBuffer = '';
+  Timer? _searchTimer;
 
   /// The index of the selected item.
   int? get selectedIndex => _selectedIndex;
 
-  _ComboBoxRoute<T>? _comboboxRoute;
-  FocusNode? _internalNode;
-
   /// The focus node for the combo box.
   FocusNode? get focusNode => widget.focusNode ?? _internalNode;
-  bool _hasPrimaryFocus = false;
-  late Map<Type, Action<Intent>> _actionMap;
 
-  // Only used if needed to create _internalNode.
-  FocusNode _createFocusNode() {
-    return FocusNode(debugLabel: '${widget.runtimeType}');
-  }
+  /// Whether the combo box is enabled.
+  bool get isEnabled =>
+      widget.items != null &&
+      widget.items!.isNotEmpty &&
+      widget.onChanged != null;
 
   @override
   void initState() {
     super.initState();
-    _updateSelectedIndex();
-    if (widget.focusNode == null) {
-      _internalNode ??= _createFocusNode();
-    }
-    _actionMap = <Type, Action<Intent>>{
-      ActivateIntent: CallbackAction<ActivateIntent>(
-        onInvoke: (intent) => openPopup(),
-      ),
-      ButtonActivateIntent: CallbackAction<ButtonActivateIntent>(
-        onInvoke: (intent) => openPopup(),
-      ),
-    };
+    _selectedIndex = _findSelectedIndex();
+    _internalNode = widget.focusNode == null ? _createFocusNode() : null;
+    _animationController = AnimationController(
+      vsync: this,
+      duration: _kComboBoxMenuDuration,
+      reverseDuration: _kComboBoxMenuDuration,
+    )..addStatusListener(_handleAnimationStatus);
     focusNode!.addListener(_handleFocusChanged);
   }
 
+  @override
+  void didUpdateWidget(covariant ComboBox<T> oldWidget) {
+    super.didUpdateWidget(oldWidget);
+    if (oldWidget.focusNode != widget.focusNode) {
+      oldWidget.focusNode?.removeListener(_handleFocusChanged);
+      if (widget.focusNode == null) _internalNode ??= _createFocusNode();
+      focusNode!.addListener(_handleFocusChanged);
+    }
+    _selectedIndex = _findSelectedIndex();
+    if (!_isOpen) {
+      _activeIndex = null;
+      _keyboardActiveIndex = null;
+    }
+  }
+
   @override
   void dispose() {
-    closePopup();
+    if (_overlayController.isShowing) _overlayController.hide();
+    _searchTimer?.cancel();
     focusNode!.removeListener(_handleFocusChanged);
     _internalNode?.dispose();
+    _popupFocusNode.dispose();
+    _popupScopeNode.dispose();
+    _scrollController?.dispose();
+    _animationController
+      ..removeStatusListener(_handleAnimationStatus)
+      ..dispose();
     super.dispose();
   }
 
+  FocusNode _createFocusNode() =>
+      FocusNode(debugLabel: '${widget.runtimeType}');
+
+  int? _findSelectedIndex() {
+    final items = widget.items;
+    if (widget.value == null || items == null) return null;
+    final index = items.indexWhere((item) => item.value == widget.value);
+    return index < 0 ? null : index;
+  }
+
+  double _estimatedItemHeight(BuildContext context) {
+    final style = widget.style ?? FluentTheme.of(context).typography.body!;
+    return _comboBoxEstimatedItemHeight(context, style);
+  }
+
+  double _initialScrollOffset(BuildContext context, int? selectedIndex) {
+    if (selectedIndex == null || widget.items == null) return 0;
+    final box = _controlKey.currentContext?.findRenderObject() as RenderBox?;
+    if (box == null) return selectedIndex * _estimatedItemHeight(context);
+    final globalAnchor = box.localToGlobal(Offset.zero) & box.size;
+    final overlay = Overlay.maybeOf(context);
+    final overlayBox = overlay?.context.findRenderObject() as RenderBox?;
+    final anchor = overlayBox == null
+        ? globalAnchor
+        : Rect.fromPoints(
+            overlayBox.globalToLocal(globalAnchor.topLeft),
+            overlayBox.globalToLocal(globalAnchor.bottomRight),
+          );
+    final media = MediaQuery.of(context);
+    final overlaySize = overlayBox?.size ?? media.size;
+    final bounds = Rect.fromLTRB(
+      media.padding.left,
+      media.padding.top,
+      overlaySize.width - media.padding.right,
+      overlaySize.height - media.padding.bottom,
+    );
+    final estimate = _estimatedItemHeight(context);
+    final preferredHeight =
+        _kListPadding.vertical + widget.items!.length * estimate;
+    final maxHeight = widget.popupConstraints?.maxHeight ?? bounds.height;
+    final height = math.min<double>(
+      preferredHeight,
+      math.min<double>(maxHeight, bounds.height),
+    );
+    final maximumTop = math.max(bounds.top, bounds.bottom - height);
+    final popupTop = clampDouble(
+      anchor.center.dy - height / 2,
+      bounds.top,
+      maximumTop,
+    );
+    final selectedStart = _kListPadding.top + selectedIndex * estimate;
+    final selectedCenter = selectedStart + estimate / 2;
+    final desiredSelectedCenter = anchor.center.dy - popupTop;
+    final offset = selectedCenter - desiredSelectedCenter;
+    final maximumOffset = math.max<double>(0, preferredHeight - height);
+    return clampDouble(offset, 0, maximumOffset);
+  }
+
+  /// Opens the combo box popup.
+  void openPopup() {
+    if (!isEnabled) return;
+    if (_isOpen) {
+      if (_isClosing) {
+        _isClosing = false;
+        _animationController.forward();
+      }
+      return;
+    }
+
+    final items = widget.items!;
+    _selectedIndex = _findSelectedIndex();
+    _activeIndex = _selectedIndex != null && items[_selectedIndex!].enabled
+        ? _selectedIndex
+        : _firstEnabledIndex();
+    _popupAnchorIndex = _activeIndex;
+    _keyboardActiveIndex = null;
+    _scrollController?.dispose();
+    _popupAnchorScrollOffset = _initialScrollOffset(context, _activeIndex);
+    _scrollController = ScrollController(
+      initialScrollOffset: _popupAnchorScrollOffset,
+      keepScrollOffset: false,
+    );
+    _isOpen = true;
+    _isClosing = false;
+    _overlayController.show();
+    widget.onTap?.call();
+    widget.onOpen?.call();
+    WidgetsBinding.instance.addPostFrameCallback((_) {
+      if (mounted && _isOpen && !_isClosing) {
+        _popupScopeNode.requestFocus(_popupFocusNode);
+      }
+    });
+  }
+
   /// Closes the combo box popup.
   ///
-  /// If the combo box popup is not open, this method does nothing.
+  /// If the popup is not open, this method does nothing.
   void closePopup() {
-    _comboboxRoute?._dismiss();
-    _comboboxRoute = null;
+    if (!_isOpen || _isClosing) return;
+    _isClosing = true;
+    _animationController.reverse();
+  }
+
+  void _handleAnimationStatus(AnimationStatus status) {
+    if (status != AnimationStatus.dismissed || !_isClosing) return;
+    _overlayController.hide();
+    _isOpen = false;
+    _isClosing = false;
+    _scrollController?.dispose();
+    _scrollController = null;
+    _popupAnchorIndex = null;
+    _popupAnchorScrollOffset = 0;
+    widget.onClose?.call();
+    if (mounted) focusNode?.requestFocus();
   }
 
   void _handleFocusChanged() {
-    if (_hasPrimaryFocus != focusNode!.hasPrimaryFocus) {
-      setState(() {
-        _hasPrimaryFocus = focusNode!.hasPrimaryFocus;
-      });
+    final hasFocus = focusNode?.hasPrimaryFocus ?? false;
+    if (_hasPrimaryFocus != hasFocus && mounted) {
+      setState(() => _hasPrimaryFocus = hasFocus);
     }
   }
 
-  @override
-  void didUpdateWidget(ComboBox<T> oldWidget) {
-    super.didUpdateWidget(oldWidget);
-    if (widget.focusNode != oldWidget.focusNode) {
-      oldWidget.focusNode?.removeListener(_handleFocusChanged);
-      if (widget.focusNode == null) {
-        _internalNode ??= _createFocusNode();
-      }
-      _hasPrimaryFocus = focusNode!.hasPrimaryFocus;
-      focusNode!.addListener(_handleFocusChanged);
+  int? _firstEnabledIndex() {
+    final items = widget.items;
+    if (items == null) return null;
+    for (var i = 0; i < items.length; i++) {
+      if (items[i].enabled) return i;
     }
-    _updateSelectedIndex();
+    return null;
   }
 
-  void _updateSelectedIndex() {
-    if (widget.value == null || widget.items == null || widget.items!.isEmpty) {
-      _selectedIndex = null;
-      return;
+  int? _moveActive(int direction, {int? pageSize}) {
+    final items = widget.items;
+    if (items == null || items.isEmpty) return null;
+    var index = _activeIndex ?? (direction < 0 ? items.length : -1);
+    final step = pageSize ?? 1;
+    for (var count = 0; count < step; count++) {
+      var candidate = index + direction.sign;
+      candidate = candidate.clamp(0, items.length - 1);
+      while (candidate != index && !items[candidate].enabled) {
+        final next = candidate + direction.sign;
+        if (next < 0 || next >= items.length) break;
+        candidate = next;
+      }
+      if (items[candidate].enabled) index = candidate;
     }
+    if (index < 0 || index >= items.length || !items[index].enabled) {
+      return _firstEnabledIndex();
+    }
+    return index;
+  }
 
-    // only update the selected value if it exists
-    if (widget.items!.any((item) => item.value == widget.value)) {
-      for (var itemIndex = 0; itemIndex < widget.items!.length; itemIndex++) {
-        if (widget.items![itemIndex].value == widget.value) {
-          _selectedIndex = itemIndex;
-          break;
-        }
+  void _setActiveIndex(
+    int? index, {
+    bool scrollIntoView = true,
+    bool keyboard = false,
+  }) {
+    if (index == null || widget.items?[index].enabled != true) return;
+    if (index == _activeIndex) {
+      if (keyboard && _keyboardActiveIndex != index) {
+        setState(() => _keyboardActiveIndex = index);
       }
-    } else {
-      _selectedIndex = null;
+      return;
+    }
+    setState(() {
+      _activeIndex = index;
+      if (keyboard) _keyboardActiveIndex = index;
+    });
+    if (scrollIntoView) {
+      _popupKey.currentState?.ensureActiveVisible();
     }
   }
 
-  TextStyle? _textStyle(BuildContext context) =>
-      widget.style ?? FluentTheme.of(context).typography.body;
+  void _handlePointerActiveChanged(int index) {
+    _setActiveIndex(index, scrollIntoView: false);
+  }
 
-  /// Opens the combo box popup.
-  ///
-  /// If the combo box is not enabled, this method does nothing.
-  ///
-  /// If the combo box popup is already open, this method does nothing.
-  void openPopup() {
-    assert(isEnabled, 'The ComboBox must be enabled to open a popup');
-    final textDirection = Directionality.maybeOf(context);
-    const EdgeInsetsGeometry menuMargin = _kAlignedMenuMargin;
-
-    final navigator = Navigator.of(context);
-    assert(_comboboxRoute == null);
-    final itemBox = context.findRenderObject()! as RenderBox;
-    final itemRect =
-        itemBox.localToGlobal(
-          Offset.zero,
-          ancestor: navigator.context.findRenderObject(),
-        ) &
-        itemBox.size;
-    _comboboxRoute = _ComboBoxRoute<T>(
-      acrylicEnabled: DisableAcrylic.of(context) == null,
-      items: widget.items!,
-      buttonRect: menuMargin.resolve(textDirection).inflateRect(itemRect),
-      padding: _kMenuItemPadding.resolve(textDirection),
-      selectedIndex: _selectedIndex,
-      elevation: widget.elevation,
-      capturedThemes: InheritedTheme.capture(
-        from: context,
-        to: navigator.context,
-      ),
-      style: _textStyle(context)!,
-      textScaler: MediaQuery.textScalerOf(context),
-      barrierLabel: FluentLocalizations.of(context).modalBarrierDismissLabel,
-      popupColor: widget.popupColor,
-    );
+  void _selectIndex(int index) {
+    final items = widget.items;
+    if (items == null || !items[index].enabled) return;
+    items[index].onTap?.call();
+    _onChanged(items[index].value);
+    closePopup();
+  }
 
-    navigator.push(_comboboxRoute!).then<void>((newValue) {
-      closePopup();
-      if (!mounted || newValue == null) return;
-      _onChanged(newValue.result);
-    });
+  void _onChanged(T? value) => widget.onChanged?.call(value);
 
-    widget.onTap?.call();
+  String? _searchLabel(ComboBoxItem<T> item) {
+    if (item.searchLabel != null) return item.searchLabel;
+    final child = item.child;
+    if (child is Text) return child.data ?? child.textSpan?.toPlainText();
+    return null;
   }
 
-  void _onChanged(T? newValue) {
-    widget.onChanged?.call(newValue);
+  bool _handleTypeAhead(String input) {
+    final items = widget.items;
+    if (items == null || input.isEmpty) return false;
+    final character = input.toLowerCase();
+    if (_searchTimer?.isActive != true) {
+      _searchBuffer = '';
+    }
+    if (_searchBuffer.isNotEmpty &&
+        _searchBuffer.split('').every((value) => value == character)) {
+      _searchBuffer = character;
+    } else {
+      _searchBuffer += character;
+    }
+    _searchTimer?.cancel();
+    _searchTimer = Timer(_kComboBoxSearchDuration, () {
+      _searchBuffer = '';
+    });
+
+    final start = (_isOpen ? _activeIndex : _selectedIndex) ?? -1;
+    int? match;
+    for (var offset = 1; offset <= items.length; offset++) {
+      final index = (start + offset) % items.length;
+      final label = _searchLabel(items[index]);
+      if (items[index].enabled &&
+          label != null &&
+          label.toLowerCase().startsWith(_searchBuffer)) {
+        match = index;
+        break;
+      }
+    }
+    if (match == null) return false;
+    if (_isOpen) {
+      _setActiveIndex(match, keyboard: true);
+    } else {
+      _onChanged(items[match].value);
+    }
+    return true;
   }
 
-  Color _iconColor(BuildContext context) {
-    final res = FluentTheme.of(context).resources;
-    if (isEnabled) {
-      if (widget.iconEnabledColor != null) return widget.iconEnabledColor!;
+  KeyEventResult _handleClosedKey(FocusNode node, KeyEvent event) {
+    if (event is! KeyDownEvent && event is! KeyRepeatEvent) {
+      return KeyEventResult.ignored;
+    }
+    if (event.logicalKey == LogicalKeyboardKey.arrowDown ||
+        event.logicalKey == LogicalKeyboardKey.arrowUp) {
+      openPopup();
+      return KeyEventResult.handled;
+    }
+    final character = event.character;
+    if (character != null && character.trim().isNotEmpty) {
+      return _handleTypeAhead(character)
+          ? KeyEventResult.handled
+          : KeyEventResult.ignored;
+    }
+    return KeyEventResult.ignored;
+  }
 
-      final state = HoverButton.of(context).states;
+  KeyEventResult _handlePopupKey(FocusNode node, KeyEvent event) {
+    if (event is! KeyDownEvent && event is! KeyRepeatEvent) {
+      return KeyEventResult.ignored;
+    }
+    final key = event.logicalKey;
+    if (key == LogicalKeyboardKey.escape) {
+      closePopup();
+      return KeyEventResult.handled;
+    }
+    if (key == LogicalKeyboardKey.enter || key == LogicalKeyboardKey.space) {
+      final active = _activeIndex;
+      if (active != null) _selectIndex(active);
+      return KeyEventResult.handled;
+    }
+    if (key == LogicalKeyboardKey.tab) {
+      closePopup();
+      return KeyEventResult.handled;
+    }
+    if (key == LogicalKeyboardKey.arrowDown ||
+        key == LogicalKeyboardKey.arrowUp) {
+      _setActiveIndex(
+        _moveActive(key == LogicalKeyboardKey.arrowDown ? 1 : -1),
+        keyboard: true,
+      );
+      return KeyEventResult.handled;
+    }
+    if (key == LogicalKeyboardKey.home) {
+      _setActiveIndex(_firstEnabledIndex(), keyboard: true);
+      return KeyEventResult.handled;
+    }
+    if (key == LogicalKeyboardKey.end) {
+      final index = switch (widget.items) {
+        final items? => items.lastIndexWhere((item) => item.enabled),
+        _ => -1,
+      };
+      _setActiveIndex(index == -1 ? null : index, keyboard: true);
+      return KeyEventResult.handled;
+    }
+    if (key == LogicalKeyboardKey.pageDown ||
+        key == LogicalKeyboardKey.pageUp) {
+      final page = math.max(
+        1,
+        (_popupKey.currentContext?.size?.height ?? 200) ~/ 38,
+      );
+      _setActiveIndex(
+        _moveActive(key == LogicalKeyboardKey.pageDown ? page : -page),
+        keyboard: true,
+      );
+      return KeyEventResult.handled;
+    }
+    final character = event.character;
+    if (character != null && character.trim().isNotEmpty) {
+      return _handleTypeAhead(character)
+          ? KeyEventResult.handled
+          : KeyEventResult.ignored;
+    }
+    return KeyEventResult.ignored;
+  }
 
-      if (state.isPressed) {
-        return res.textFillColorTertiary;
-      }
+  Color _iconColor(BuildContext context) {
+    final resources = FluentTheme.of(context).resources;
+    if (!isEnabled) {
+      return widget.iconDisabledColor ?? resources.textFillColorDisabled;
+    }
+    if (widget.iconEnabledColor != null) return widget.iconEnabledColor!;
+    final states = HoverButton.maybeOf(context)?.states ?? <WidgetState>{};
+    return states.isPressed
+        ? resources.textFillColorTertiary
+        : resources.textFillColorSecondary;
+  }
 
-      return widget.iconEnabledColor ?? res.textFillColorSecondary;
-    } else {
-      return widget.iconDisabledColor ?? res.textFillColorDisabled;
+  double _preferredPopupWidth(
+    BuildContext context,
+    TextStyle style,
+    double minimumWidth,
+  ) {
+    var width = minimumWidth;
+    final textDirection = Directionality.of(context);
+    final scaler = MediaQuery.textScalerOf(context);
+    for (final item in widget.items ?? <ComboBoxItem<T>>[]) {
+      final child = item.child;
+      if (child is! Text) continue;
+      final text = child.data ?? child.textSpan?.toPlainText();
+      if (text == null || text.isEmpty) continue;
+      final painter = TextPainter(
+        text: TextSpan(text: text, style: style),
+        textDirection: textDirection,
+        textScaler: scaler,
+      )..layout();
+      width = math.max<double>(
+        width,
+        painter.width + _kMenuItemPadding.horizontal + 12 + 24,
+      );
     }
+    return width;
   }
 
-  /// Whether the combo box is enabled.
-  bool get isEnabled =>
-      widget.items != null &&
-      widget.items!.isNotEmpty &&
-      widget.onChanged != null;
+  String? _selectedSearchLabel() {
+    final index = _selectedIndex;
+    final items = widget.items;
+    return index == null || items == null ? null : _searchLabel(items[index]);
+  }
+
+  Widget _buildPopup(BuildContext context, OverlayChildLayoutInfo info) {
+    final items = widget.items;
+    final controller = _scrollController;
+    if (items == null || controller == null) return const SizedBox.shrink();
+    final transform = info.childPaintTransform;
+    final anchorRect = MatrixUtils.transformRect(
+      transform,
+      Offset.zero & info.childSize,
+    );
+    final media = MediaQuery.of(context);
+    final bounds = Rect.fromLTRB(
+      media.padding.left,
+      media.padding.top,
+      info.overlaySize.width - media.padding.right,
+      info.overlaySize.height - media.padding.bottom,
+    );
+    final overlay = Overlay.maybeOf(context);
+    final overlayBox = overlay?.context.findRenderObject() as RenderBox?;
+    final anchorCenterGlobalY = overlayBox == null
+        ? anchorRect.center.dy
+        : overlayBox.localToGlobal(anchorRect.center).dy;
+    final textDirection = Directionality.of(context);
+    final style = widget.style ?? FluentTheme.of(context).typography.body!;
+    final estimate = _estimatedItemHeight(context);
+    final preferredWidth = _preferredPopupWidth(
+      context,
+      style,
+      anchorRect.width,
+    );
+
+    return Stack(
+      fit: StackFit.expand,
+      children: [
+        Positioned.fill(
+          child: Semantics(
+            label: FluentLocalizations.of(context).modalBarrierDismissLabel,
+            button: true,
+            child: GestureDetector(
+              behavior: HitTestBehavior.opaque,
+              onTap: closePopup,
+              child: const SizedBox.expand(),
+            ),
+          ),
+        ),
+        Positioned.fill(
+          child: CustomSingleChildLayout(
+            delegate: _ComboBoxPopupLayout(
+              anchorRect: anchorRect,
+              bounds: bounds,
+              popupConstraints: widget.popupConstraints,
+              preferredWidth: preferredWidth,
+              textDirection: textDirection,
+              selectedIndex: _popupAnchorIndex,
+              estimatedItemHeight: estimate,
+              scrollOffset: _popupAnchorScrollOffset,
+            ),
+            child: FocusScope(
+              node: _popupScopeNode,
+              child: Focus(
+                focusNode: _popupFocusNode,
+                onKeyEvent: _handlePopupKey,
+                child: Semantics(
+                  scopesRoute: true,
+                  namesRoute: true,
+                  explicitChildNodes: true,
+                  label: FluentLocalizations.of(context).dialogLabel,
+                  child: _ComboBoxPopup<T>(
+                    key: _popupKey,
+                    items: items,
+                    selectedIndex: _selectedIndex,
+                    activeIndex: _activeIndex,
+                    animationIndex: _popupAnchorIndex,
+                    keyboardActiveIndex: _keyboardActiveIndex,
+                    itemPadding: _kMenuItemPadding,
+                    style: style,
+                    popupColor: widget.popupColor,
+                    elevation: widget.elevation,
+                    animation: _animationController,
+                    scrollController: controller,
+                    anchorCenterGlobalY: anchorCenterGlobalY,
+                    searchLabel: _searchLabel,
+                    onActiveChanged: _handlePointerActiveChanged,
+                    onSelected: _selectIndex,
+                  ),
+                ),
+              ),
+            ),
+          ),
+        ),
+      ],
+    );
+  }
 
   @override
   Widget build(BuildContext context) {
@@ -1362,105 +1198,97 @@ class ComboBoxState<T> extends State<ComboBox<T>> {
     assert(debugCheckHasDirectionality(context));
 
     final theme = FluentTheme.of(context);
-    final textStyle = _textStyle(context)!;
-
-    // The width of the button and the menu are defined by the widest
-    // item and the width of the placeholder.
-    // We should explicitly type the items list to be a list of <Widget>,
-    // otherwise, no explicit type adding items maybe trigger a crash/failure
-    // when placeholder and selectedItemBuilder are provided.
-    final items = widget.selectedItemBuilder == null
-        ? (widget.items != null ? List<Widget>.from(widget.items!) : <Widget>[])
+    final textStyle = widget.style ?? theme.typography.body!;
+    final items = widget.items == null
+        ? <Widget>[]
+        : widget.selectedItemBuilder == null
+        ? List<Widget>.from(widget.items!)
         : List<Widget>.from(widget.selectedItemBuilder!(context));
-
     int? placeholderIndex;
     if (widget.placeholder != null ||
         (!isEnabled && widget.disabledPlaceholder != null)) {
-      var displayedHint = isEnabled
+      final placeholder = isEnabled
           ? widget.placeholder!
           : widget.disabledPlaceholder ?? widget.placeholder!;
-      if (widget.selectedItemBuilder == null) {
-        displayedHint = _ComboBoxItemContainer(child: displayedHint);
-      }
-
       placeholderIndex = items.length;
       items.add(
         DefaultTextStyle.merge(
           style: textStyle.copyWith(
-            color: theme.resources.textFillColorDisabled,
+            color: isEnabled
+                ? theme.resources.textFillColorSecondary
+                : theme.resources.textFillColorDisabled,
           ),
-          child: IgnorePointer(child: displayedHint),
-        ),
-      );
-    }
-
-    const padding = _kAlignedButtonPadding;
-
-    // If value is null (then _selectedIndex is null) then we
-    // display the placeholder or nothing at all.
-    final Widget innerItemsWidget;
-    if (items.isEmpty) {
-      innerItemsWidget = Container();
-    } else {
-      innerItemsWidget = _ContainerWithoutPadding(
-        child: IndexedStack(
-          sizing: StackFit.passthrough,
-          index: _selectedIndex ?? placeholderIndex,
-          alignment: AlignmentDirectional.centerStart,
-          children: items.map((item) {
-            return Column(mainAxisSize: MainAxisSize.min, children: [item]);
-          }).toList(),
+          child: IgnorePointer(child: placeholder),
         ),
       );
     }
 
-    final Widget result = Builder(
-      builder: (context) {
-        return DefaultTextStyle.merge(
-          style: isEnabled
-              ? textStyle
-              : textStyle.copyWith(
-                  color: theme.resources.textFillColorDisabled,
-                ),
-          child: Container(
-            padding: padding.resolve(Directionality.of(context)),
-            child: Row(
-              mainAxisAlignment: MainAxisAlignment.spaceBetween,
-              mainAxisSize: MainAxisSize.min,
-              children: <Widget>[
-                if (widget.isExpanded)
-                  Expanded(child: innerItemsWidget)
-                else
-                  innerItemsWidget,
-                Padding(
-                  padding: const EdgeInsetsDirectional.only(start: 8),
-                  child: IconTheme.merge(
-                    data: IconThemeData(
-                      color: _iconColor(context),
-                      size: widget.iconSize,
-                    ),
-                    child: widget.icon,
+    final displayIndex = _selectedIndex ?? placeholderIndex;
+    final innerItems = displayIndex == null
+        ? const SizedBox.shrink()
+        : _ContainerWithoutPadding(child: items[displayIndex]);
+    final minimumControlHeight = math.max<double>(
+      0,
+      kComboBoxItemHeight -
+          _kMenuItemBottomPadding +
+          theme.visualDensity.baseSizeAdjustment.dy,
+    );
+    final result = ConstrainedBox(
+      constraints: BoxConstraints(minHeight: minimumControlHeight),
+      child: DefaultTextStyle.merge(
+        style: isEnabled
+            ? textStyle
+            : textStyle.copyWith(color: theme.resources.textFillColorDisabled),
+        child: Padding(
+          padding: _kAlignedButtonPadding.resolve(Directionality.of(context)),
+          child: Row(
+            mainAxisAlignment: MainAxisAlignment.spaceBetween,
+            mainAxisSize: widget.isExpanded
+                ? MainAxisSize.max
+                : MainAxisSize.min,
+            children: [
+              if (widget.isExpanded)
+                Expanded(child: innerItems)
+              else
+                innerItems,
+              Padding(
+                padding: const EdgeInsetsDirectional.only(start: 8),
+                child: IconTheme.merge(
+                  data: IconThemeData(
+                    color: _iconColor(context),
+                    size: widget.iconSize,
                   ),
+                  child: widget.icon,
                 ),
-              ],
-            ),
+              ),
+            ],
           ),
-        );
-      },
+        ),
+      ),
     );
 
-    return Semantics(
-      button: true,
-      child: Actions(
-        actions: _actionMap,
-        child: Button(
-          onPressed: isEnabled ? openPopup : null,
-          autofocus: widget.autofocus,
-          focusNode: focusNode,
-          style: const ButtonStyle(
-            padding: WidgetStatePropertyAll(EdgeInsetsDirectional.zero),
+    return Focus(
+      canRequestFocus: false,
+      skipTraversal: true,
+      onKeyEvent: _handleClosedKey,
+      child: Semantics(
+        button: true,
+        enabled: isEnabled,
+        expanded: _isOpen,
+        label: _selectedSearchLabel(),
+        child: OverlayPortal.overlayChildLayoutBuilder(
+          controller: _overlayController,
+          overlayChildBuilder: _buildPopup,
+          child: Button(
+            key: _controlKey,
+            onPressed: isEnabled ? openPopup : null,
+            autofocus: widget.autofocus,
+            focusNode: focusNode,
+            style: const ButtonStyle(
+              padding: WidgetStatePropertyAll(EdgeInsetsDirectional.zero),
+            ),
+            child: result,
           ),
-          child: result,
         ),
       ),
     );
diff --git a/lib/src/controls/form/editable_combo_box.dart b/lib/src/controls/form/editable_combo_box.dart
index 98e96b3d7..d1efcb56c 100644
--- a/lib/src/controls/form/editable_combo_box.dart
+++ b/lib/src/controls/form/editable_combo_box.dart
@@ -41,10 +41,13 @@ class EditableComboBox<T> extends ComboBox<T> {
     super.items,
     super.onChanged,
     super.onTap,
+    super.onOpen,
+    super.onClose,
     super.placeholder,
     super.selectedItemBuilder,
     super.style,
     super.value,
+    super.popupConstraints,
     this.textController,
     this.onTextChanged,
     this.inputFormatters,
@@ -167,47 +170,45 @@ class _EditableComboboxState<T> extends ComboBoxState<T> {
     assert(debugCheckHasFluentTheme(context));
     assert(debugCheckHasFluentLocalizations(context));
 
-    return Focus(
-      onKeyEvent: (node, event) {
-        if (event is! KeyDownEvent) {
-          return KeyEventResult.ignored;
-        }
-
-        if (event.logicalKey == LogicalKeyboardKey.arrowDown ||
-            event.logicalKey == LogicalKeyboardKey.arrowUp) {
-          openPopup();
-          return KeyEventResult.handled;
-        }
-        return KeyEventResult.ignored;
-      },
-      child: TextBox(
-        style: widget.style,
-        focusNode: focusNode,
-        autofocus: widget.autofocus,
-        controller: controller,
-        expands: widget.isExpanded,
-        enabled: isEnabled,
-        unfocusedColor: Colors.transparent,
-        suffix: Builder(
-          builder: (context) {
-            return IconButton(
-              icon: IconTheme.merge(
-                data: IconThemeData(
-                  color: _iconColor(context),
-                  size: widget.iconSize,
+    return OverlayPortal.overlayChildLayoutBuilder(
+      controller: _overlayController,
+      overlayChildBuilder: _buildPopup,
+      child: Focus(
+        onKeyEvent: (node, event) {
+          if (event is! KeyDownEvent && event is! KeyRepeatEvent) {
+            return KeyEventResult.ignored;
+          }
+          return _handleClosedKey(node, event);
+        },
+        child: TextBox(
+          style: widget.style,
+          focusNode: focusNode,
+          autofocus: widget.autofocus,
+          controller: controller,
+          expands: widget.isExpanded,
+          enabled: isEnabled,
+          unfocusedColor: Colors.transparent,
+          suffix: Builder(
+            builder: (context) {
+              return IconButton(
+                icon: IconTheme.merge(
+                  data: IconThemeData(
+                    color: _iconColor(context),
+                    size: widget.iconSize,
+                  ),
+                  child: widget.icon,
                 ),
-                child: widget.icon,
-              ),
-              onPressed: openPopup,
-            );
+                onPressed: openPopup,
+              );
+            },
+          ),
+          onSubmitted: (text) {
+            final newText = widget.onFieldSubmitted(text);
+            _setText(newText);
           },
+          onChanged: widget.onTextChanged,
+          inputFormatters: widget.inputFormatters,
         ),
-        onSubmitted: (text) {
-          final newText = widget.onFieldSubmitted(text);
-          _setText(newText);
-        },
-        onChanged: widget.onTextChanged,
-        inputFormatters: widget.inputFormatters,
       ),
     );
   }
@@ -244,6 +245,8 @@ class ComboboxFormField<T> extends FormField<T> {
     Widget? placeholder,
     Widget? disabledPlaceholder,
     VoidCallback? onTap,
+    VoidCallback? onOpen,
+    VoidCallback? onClose,
     int elevation = 8,
     TextStyle? style,
     Widget icon = const WindowsIcon(WindowsIcons.chevron_down),
@@ -255,6 +258,7 @@ class ComboboxFormField<T> extends FormField<T> {
     FocusNode? focusNode,
     bool autofocus = false,
     Color? popupColor,
+    BoxConstraints? popupConstraints,
     super.onSaved,
     super.validator,
     super.autovalidateMode = AutovalidateMode.disabled,
@@ -287,6 +291,8 @@ class ComboboxFormField<T> extends FormField<T> {
                        disabledPlaceholder: disabledPlaceholder,
                        onChanged: onChanged == null ? null : state.didChange,
                        onTap: onTap,
+                       onOpen: onOpen,
+                       onClose: onClose,
                        elevation: elevation,
                        style: style,
                        icon: icon,
@@ -298,6 +304,7 @@ class ComboboxFormField<T> extends FormField<T> {
                        focusNode: focusNode,
                        autofocus: autofocus,
                        popupColor: popupColor,
+                       popupConstraints: popupConstraints,
                      ),
                    ),
                  );
@@ -364,6 +371,8 @@ class EditableComboboxFormField<T> extends FormField<T> {
     Widget? placeholder,
     Widget? disabledPlaceholder,
     VoidCallback? onTap,
+    VoidCallback? onOpen,
+    VoidCallback? onClose,
     int elevation = 8,
     TextStyle? style,
     Widget icon = const WindowsIcon(WindowsIcons.chevron_down),
@@ -375,6 +384,7 @@ class EditableComboboxFormField<T> extends FormField<T> {
     FocusNode? focusNode,
     bool autofocus = false,
     Color? popupColor,
+    BoxConstraints? popupConstraints,
     super.onSaved,
     super.validator,
     super.autovalidateMode = AutovalidateMode.disabled,
@@ -407,6 +417,8 @@ class EditableComboboxFormField<T> extends FormField<T> {
                        disabledPlaceholder: disabledPlaceholder,
                        onChanged: onChanged == null ? null : state.didChange,
                        onTap: onTap,
+                       onOpen: onOpen,
+                       onClose: onClose,
                        elevation: elevation,
                        style: style,
                        icon: icon,
@@ -418,6 +430,7 @@ class EditableComboboxFormField<T> extends FormField<T> {
                        focusNode: focusNode,
                        autofocus: autofocus,
                        popupColor: popupColor,
+                       popupConstraints: popupConstraints,
                        onFieldSubmitted: onFieldSubmitted,
                        inputFormatters: inputFormatters,
                      ),
diff --git a/test/combo_box_test.dart b/test/combo_box_test.dart
index 200816af7..e63a324d7 100644
--- a/test/combo_box_test.dart
+++ b/test/combo_box_test.dart
@@ -4,348 +4,474 @@ import 'package:flutter_test/flutter_test.dart';
 
 import 'app_test.dart';
 
+List<ComboBoxItem<String>> _items({int count = 4}) => [
+  for (var index = 0; index < count; index++)
+    ComboBoxItem<String>(
+      key: Key('item-$index'),
+      value: '$index',
+      child: Text('Option $index'),
+    ),
+];
+
 void main() {
-  testWidgets(
-    'ComboBox should display placeholder text when no value is selected',
-    (tester) async {
-      await tester.pumpWidget(
-        StatefulBuilder(
-          builder: (context, setState) {
-            return wrapApp(
-              child: ComboBox<String>(
-                placeholder: const Text('Select item', key: Key('placeholder')),
-                items: const [
-                  ComboBoxItem(
-                    value: 'combo-box-item-1',
-                    child: Text('combo-box-item-1'),
-                  ),
-                  ComboBoxItem(
-                    value: 'combo-box-item-2',
-                    child: Text('combo-box-item-2'),
-                  ),
-                ],
-                onChanged: (value) {},
-              ),
-            );
-          },
+  testWidgets('renders a placeholder and controlled selected value', (
+    tester,
+  ) async {
+    await tester.pumpWidget(
+      wrapApp(
+        child: ComboBox<String>(
+          placeholder: const Text('Select item', key: Key('placeholder')),
+          items: _items(count: 2),
+          onChanged: (_) {},
         ),
-      );
-      final placeHolderFinder = find.byKey(const Key('placeholder'));
+      ),
+    );
 
-      expect(placeHolderFinder, findsOneWidget);
-    },
-  );
+    expect(find.byKey(const Key('placeholder')), findsOneWidget);
+
+    await tester.pumpWidget(
+      wrapApp(
+        child: ComboBox<String>(
+          value: '1',
+          placeholder: const Text('Select item', key: Key('placeholder')),
+          items: _items(count: 2),
+          onChanged: (_) {},
+        ),
+      ),
+    );
 
-  testWidgets('ComboBox should show the correct initial value when provided', (
+    expect(find.text('Option 1'), findsOneWidget);
+    expect(find.byKey(const Key('placeholder')), findsNothing);
+  });
+
+  testWidgets('pointer selection commits the value and dismisses the popup', (
     tester,
   ) async {
-    const selectedValue = 'combo-box-item-1';
+    String? selectedValue;
     await tester.pumpWidget(
-      StatefulBuilder(
-        builder: (context, setState) {
-          return wrapApp(
-            child: ComboBox<String>(
-              value: selectedValue,
-              placeholder: const Text('Select item', key: Key('placeholder')),
-              items: const [
-                ComboBoxItem(
-                  value: 'combo-box-item-1',
-                  child: Text('combo-box-item-1'),
-                ),
-                ComboBoxItem(
-                  value: 'combo-box-item-2',
-                  child: Text('combo-box-item-2'),
-                ),
-              ],
-              onChanged: (value) {},
+      wrapApp(
+        child: ComboBox<String>(
+          items: _items(count: 2),
+          onChanged: (value) => selectedValue = value,
+        ),
+      ),
+    );
+
+    await tester.tap(find.byType(ComboBox<String>));
+    await tester.pumpAndSettle();
+    expect(find.byKey(const Key('item-0')), findsOneWidget);
+
+    await tester.tap(find.byKey(const Key('item-0')));
+    await tester.pumpAndSettle();
+
+    expect(selectedValue, '0');
+    expect(find.byKey(const Key('item-1')), findsNothing);
+  });
+
+  testWidgets('disabled controls and disabled items do not commit', (
+    tester,
+  ) async {
+    String? selectedValue;
+    await tester.pumpWidget(
+      wrapApp(
+        child: ComboBox<String>(
+          items: const [
+            ComboBoxItem(
+              value: 'disabled',
+              enabled: false,
+              child: Text('Disabled'),
             ),
-          );
-        },
+            ComboBoxItem(value: 'enabled', child: Text('Enabled')),
+          ],
+          onChanged: (value) => selectedValue = value,
+        ),
       ),
     );
-    final combBoxFinder = find.byType(Text);
 
-    expect(combBoxFinder, findsOneWidget);
+    await tester.tap(find.byType(ComboBox<String>));
+    await tester.pumpAndSettle();
+    await tester.sendKeyEvent(LogicalKeyboardKey.arrowDown);
+    await tester.sendKeyEvent(LogicalKeyboardKey.enter);
+    await tester.pumpAndSettle();
+    expect(selectedValue, 'enabled');
 
-    expect(tester.widget<Text>(combBoxFinder).data, selectedValue);
+    await tester.pumpWidget(
+      wrapApp(child: ComboBox<String>(items: _items(count: 2))),
+    );
+    await tester.tap(find.byType(ComboBox<String>));
+    await tester.pumpAndSettle();
+    expect(find.byKey(const Key('item-0')), findsNothing);
+  });
+
+  testWidgets('popup opening animation starts when the portal mounts', (
+    tester,
+  ) async {
+    await tester.pumpWidget(
+      wrapApp(
+        child: ComboBox<String>(items: _items(count: 2), onChanged: (_) {}),
+      ),
+    );
+
+    await tester.tap(find.byType(ComboBox<String>));
+    await tester.pump();
+    final revealFinder = find.byKey(const Key('combo-box-popup-reveal'));
+    expect(revealFinder, findsOneWidget);
+    final initialClipper = tester.widget<ClipRect>(revealFinder).clipper!;
+    final listSize = tester.getSize(find.byType(ListView));
+    final initialClip = initialClipper.getClip(listSize);
+
+    await tester.pump();
+    await tester.pump(const Duration(milliseconds: 100));
+    final midClipper = tester.widget<ClipRect>(revealFinder).clipper!;
+    final midClip = midClipper.getClip(listSize);
+    expect(midClip.height, greaterThan(initialClip.height));
+
+    final transitionFinder = find.byKey(const Key('combo-box-popup-fade'));
+    expect(transitionFinder, findsOneWidget);
+    final transition = tester.widget<FadeTransition>(transitionFinder);
+    expect(transition.opacity.value, greaterThan(0));
+
+    await tester.pumpAndSettle();
+    final settledTransition = tester.widget<FadeTransition>(transitionFinder);
+    expect(settledTransition.opacity.value, 1);
+  });
+
+  testWidgets('hovering an item does not reposition the popup', (tester) async {
+    await tester.pumpWidget(
+      wrapApp(
+        child: ComboBox<String>(items: _items(count: 8), onChanged: (_) {}),
+      ),
+    );
+
+    await tester.tap(find.byType(ComboBox<String>));
+    await tester.pumpAndSettle();
+    final before = tester.getRect(find.byType(ListView));
+    final gesture = await tester.createGesture();
+    await gesture.moveTo(tester.getCenter(find.byKey(const Key('item-1'))));
+    await tester.pump();
+    final after = tester.getRect(find.byType(ListView));
+    await gesture.removePointer();
+
+    expect(after, before);
+  });
+
+  testWidgets('open and close callbacks fire once for each lifecycle', (
+    tester,
+  ) async {
+    var opens = 0;
+    var closes = 0;
+    await tester.pumpWidget(
+      wrapApp(
+        child: ComboBox<String>(
+          items: _items(count: 2),
+          onChanged: (_) {},
+          onOpen: () => opens++,
+          onClose: () => closes++,
+        ),
+      ),
+    );
+
+    await tester.tap(find.byType(ComboBox<String>));
+    await tester.pumpAndSettle();
+    expect(opens, 1);
+    expect(closes, 0);
+
+    await tester.sendKeyEvent(LogicalKeyboardKey.escape);
+    await tester.pumpAndSettle();
+    expect(closes, 1);
+
+    await tester.tap(find.byType(ComboBox<String>));
+    await tester.pumpAndSettle();
+    await tester.tap(find.byKey(const Key('item-0')));
+    await tester.pumpAndSettle();
+    expect(opens, 2);
+    expect(closes, 2);
+  });
+
+  testWidgets('clicking outside dismisses the popup', (tester) async {
+    await tester.pumpWidget(
+      wrapApp(
+        child: Column(
+          children: [
+            const SizedBox(key: Key('outside'), height: 200, width: 2000),
+            ComboBox<String>(items: _items(count: 2), onChanged: (_) {}),
+          ],
+        ),
+      ),
+    );
+
+    await tester.tap(find.byType(ComboBox<String>));
+    await tester.pumpAndSettle();
+    expect(find.byKey(const Key('item-0')), findsOneWidget);
+
+    await tester.tapAt(const Offset(10, 10));
+    await tester.pumpAndSettle();
+    expect(find.byKey(const Key('item-0')), findsNothing);
   });
 
   testWidgets(
-    'ComboBox should update selected value when an option is chosen',
+    'keyboard navigation highlights before committing and restores focus',
     (tester) async {
       String? selectedValue;
+      final focusNode = FocusNode();
+      addTearDown(focusNode.dispose);
       await tester.pumpWidget(
-        StatefulBuilder(
-          builder: (context, setState) {
-            return wrapApp(
-              child: ComboBox<String>(
-                autofocus: true,
-                placeholder: const Text('Select item', key: Key('placeholder')),
-                items: const [
-                  ComboBoxItem(
-                    key: Key('combo-box-item-1'),
-                    value: 'combo-box-item-1',
-                    child: Text('combo-box-item-1'),
-                  ),
-                  ComboBoxItem(
-                    key: Key('combo-box-item-2'),
-                    value: 'combo-box-item-2',
-                    child: Text('combo-box-item-2'),
-                  ),
-                ],
-                onChanged: (value) {
-                  setState(() {
-                    selectedValue = value;
-                  });
-                },
-              ),
-            );
-          },
+        wrapApp(
+          child: ComboBox<String>(
+            autofocus: true,
+            focusNode: focusNode,
+            items: _items(count: 3),
+            onChanged: (value) => selectedValue = value,
+          ),
         ),
       );
 
-      await tester.tap(find.byType(ComboBox<String>));
-
-      await tester.pumpAndSettle();
-      await tester.tap(find.byKey(const Key('combo-box-item-1')));
+      await tester.sendKeyEvent(LogicalKeyboardKey.enter);
       await tester.pumpAndSettle();
+      expect(find.byKey(const Key('item-0')), findsOneWidget);
+      expect(selectedValue, isNull);
+
+      await tester.sendKeyEvent(LogicalKeyboardKey.arrowDown);
+      await tester.pump();
+      expect(selectedValue, isNull);
 
-      expect(selectedValue, 'combo-box-item-1');
+      await tester.sendKeyEvent(LogicalKeyboardKey.enter);
+      await tester.pumpAndSettle();
+      expect(selectedValue, '1');
+      expect(focusNode.hasPrimaryFocus, isTrue);
     },
   );
-  testWidgets('ComboBox should open dropdown when clicked/tapped', (
+
+  testWidgets('type-ahead is case-insensitive and skips disabled items', (
     tester,
   ) async {
+    String? selectedValue;
     await tester.pumpWidget(
-      StatefulBuilder(
-        builder: (context, setState) {
-          return wrapApp(
-            child: ComboBox<String>(
-              placeholder: const Text('Select item', key: Key('placeholder')),
-              items: const [
-                ComboBoxItem(
-                  key: Key('combo-box-item-1'),
-                  value: 'combo-box-item-1',
-                  child: Text('combo-box-item-1'),
-                ),
-                ComboBoxItem(
-                  key: Key('combo-box-item-2'),
-                  value: 'combo-box-item-2',
-                  child: Text('combo-box-item-2'),
-                ),
-              ],
-              onChanged: (value) {},
+      wrapApp(
+        child: ComboBox<String>(
+          autofocus: true,
+          items: const [
+            ComboBoxItem(
+              value: 'disabled',
+              enabled: false,
+              child: Text('Blue'),
             ),
-          );
-        },
+            ComboBoxItem(value: 'enabled', child: Text('Black')),
+          ],
+          onChanged: (value) => selectedValue = value,
+        ),
       ),
     );
-    final combBoxFinder = find.byType(ComboBox<String>);
-    expect(combBoxFinder, findsOneWidget);
-    await tester.tap(combBoxFinder);
-    await tester.pumpAndSettle();
-    final combBoxItem1Finder = find.byKey(const Key('combo-box-item-1'));
 
-    final combBoxItem2Finder = find.byKey(const Key('combo-box-item-2'));
-    expect(combBoxItem1Finder, findsOneWidget);
-    expect(combBoxItem2Finder, findsOneWidget);
+    await tester.sendKeyEvent(LogicalKeyboardKey.keyB);
+    await tester.pump();
+    expect(selectedValue, 'enabled');
   });
 
-  testWidgets('ComboBox should close dropdown when clicking outside', (
-    tester,
-  ) async {
+  testWidgets('custom search labels support type-ahead', (tester) async {
+    String? selectedValue;
     await tester.pumpWidget(
-      StatefulBuilder(
-        builder: (context, setState) {
-          return wrapApp(
-            child: Column(
-              children: [
-                const SizedBox(
-                  key: Key('empty-area'),
-                  height: 200,
-                  width: 2000,
-                ),
-                ComboBox<String>(
-                  placeholder: const Text(
-                    'Select item',
-                    key: Key('placeholder'),
-                  ),
-                  items: const [
-                    ComboBoxItem(
-                      key: Key('combo-box-item-1'),
-                      value: 'combo-box-item-1',
-                      child: Text('combo-box-item-1'),
-                    ),
-                    ComboBoxItem(
-                      key: Key('combo-box-item-2'),
-                      value: 'combo-box-item-2',
-                      child: Text('combo-box-item-2'),
-                    ),
-                  ],
-                  onChanged: (value) {},
-                ),
-              ],
+      wrapApp(
+        child: ComboBox<String>(
+          autofocus: true,
+          items: const [
+            ComboBoxItem(
+              value: 'second',
+              searchLabel: 'Searchable second',
+              child: Icon(WindowsIcons.search),
             ),
-          );
-        },
+          ],
+          onChanged: (value) => selectedValue = value,
+        ),
       ),
     );
-    final combBoxFinder = find.byType(ComboBox<String>);
-    expect(combBoxFinder, findsOneWidget);
-    await tester.tap(combBoxFinder);
-    await tester.pumpAndSettle();
 
-    expect(find.byKey(const Key('combo-box-item-1')), findsOneWidget);
-    final emptyAreaFinder = find.byKey(const Key('empty-area'));
+    await tester.sendKeyEvent(LogicalKeyboardKey.keyS);
+    await tester.pump();
+    expect(selectedValue, 'second');
+  });
 
-    expect(emptyAreaFinder, findsOneWidget);
-    await tester.tap(emptyAreaFinder);
+  testWidgets('editable ComboBox uses the shared popup architecture', (
+    tester,
+  ) async {
+    await tester.pumpWidget(
+      wrapApp(
+        child: EditableComboBox<String>(
+          value: '0',
+          items: _items(count: 2),
+          onChanged: (_) {},
+          onFieldSubmitted: (text) => text,
+        ),
+      ),
+    );
+
+    await tester.tap(find.byType(IconButton));
     await tester.pumpAndSettle();
-    expect(find.byKey(const Key('combo-box-item-1')), findsNothing);
+    expect(find.byKey(const Key('item-1')), findsOneWidget);
+    expect(tester.takeException(), isNull);
   });
 
-  testWidgets('ComboBox should close dropdown after selecting an item', (
+  testWidgets('variable-height items respect large text scaling', (
     tester,
   ) async {
     await tester.pumpWidget(
-      StatefulBuilder(
-        builder: (context, setState) {
-          return wrapApp(
-            child: ComboBox<String>(
-              placeholder: const Text('Select item', key: Key('placeholder')),
-              items: const [
-                ComboBoxItem(
-                  key: Key('combo-box-item-1'),
-                  value: 'combo-box-item-1',
-                  child: Text('combo-box-item-1'),
-                ),
-                ComboBoxItem(
-                  key: Key('combo-box-item-2'),
-                  value: 'combo-box-item-2',
-                  child: Text('combo-box-item-2'),
+      wrapApp(
+        child: MediaQuery(
+          data: const MediaQueryData(textScaler: TextScaler.linear(2)),
+          child: ComboBox<String>(
+            items: const [
+              ComboBoxItem(value: 'short', child: Text('Short')),
+              ComboBoxItem(
+                value: 'long',
+                child: Column(
+                  crossAxisAlignment: CrossAxisAlignment.start,
+                  children: [
+                    Text('A multiline option with a larger text scale'),
+                    Text('A caption below the option'),
+                  ],
                 ),
-              ],
-              onChanged: (value) {},
-            ),
-          );
-        },
+              ),
+            ],
+            onChanged: (_) {},
+          ),
+        ),
       ),
     );
-    final combBoxFinder = find.byType(ComboBox<String>);
-    expect(combBoxFinder, findsOneWidget);
-    await tester.tap(combBoxFinder);
-    await tester.pumpAndSettle();
-    final comboBoxItem1Finder = find.byKey(const Key('combo-box-item-1'));
-    expect(comboBoxItem1Finder, findsOneWidget);
 
-    await tester.tap(comboBoxItem1Finder);
+    await tester.tap(find.byType(ComboBox<String>));
     await tester.pumpAndSettle();
-    expect(find.byKey(const Key('combo-box-item-1')), findsNothing);
+    expect(tester.takeException(), isNull);
+    expect(find.text('A caption below the option'), findsOneWidget);
   });
 
-  testWidgets('ComboBox should open dropdown when pressing enter key', (
+  testWidgets('constrained popup anchors correctly with large text scaling', (
     tester,
   ) async {
     await tester.pumpWidget(
-      StatefulBuilder(
-        builder: (context, setState) {
-          return wrapApp(
-            child: ComboBox<String>(
-              autofocus: true,
-              placeholder: const Text('Select item', key: Key('placeholder')),
-              items: const [
-                ComboBoxItem(
-                  key: Key('combo-box-item-1'),
-                  value: 'combo-box-item-1',
-                  child: Text('combo-box-item-1'),
-                ),
-                ComboBoxItem(
-                  key: Key('combo-box-item-2'),
-                  value: 'combo-box-item-2',
-                  child: Text('combo-box-item-2'),
-                ),
-              ],
-              onChanged: (value) {},
-            ),
-          );
-        },
+      wrapApp(
+        child: MediaQuery(
+          data: const MediaQueryData(textScaler: TextScaler.linear(2)),
+          child: ComboBox<String>(
+            value: '8',
+            popupConstraints: const BoxConstraints(maxHeight: 220),
+            items: _items(count: 30),
+            onChanged: (_) {},
+          ),
+        ),
       ),
     );
 
-    await tester.sendKeyEvent(LogicalKeyboardKey.enter);
-
+    await tester.tap(find.byType(ComboBox<String>));
     await tester.pumpAndSettle();
-    final comboBoxItem1Finder = find.byKey(const Key('combo-box-item-1'));
-    expect(comboBoxItem1Finder, findsOneWidget);
+
+    final control = tester.getRect(find.text('Option 8').first);
+    final selected = tester.getRect(find.byKey(const Key('item-8')).last);
+    final popup = tester.getRect(find.byType(ListView));
+    expect(selected.top, greaterThanOrEqualTo(popup.top));
+    expect(selected.bottom, lessThanOrEqualTo(popup.bottom));
+    expect((selected.center.dy - control.center.dy).abs(), lessThan(24));
+    expect(tester.takeException(), isNull);
   });
 
-  testWidgets('ComboBox with one item should open without throwing', (
+  testWidgets('selected item remains visible near the lower viewport edge', (
     tester,
   ) async {
-    String? selectedValue;
+    tester.view.physicalSize = const Size(320, 220);
+    tester.view.devicePixelRatio = 1;
+    addTearDown(tester.view.reset);
 
     await tester.pumpWidget(
-      StatefulBuilder(
-        builder: (context, setState) {
-          return wrapApp(
-            child: ComboBox<String>(
-              value: selectedValue,
-              items: const [
-                ComboBoxItem<String>(
-                  key: Key('single-combo-box-item'),
-                  value: 'something',
-                  child: Text('something'),
-                ),
-              ],
-              onChanged: (value) => setState(() => selectedValue = value),
-            ),
-          );
-        },
+      wrapApp(
+        child: Align(
+          alignment: Alignment.bottomCenter,
+          child: ComboBox<String>(
+            value: '25',
+            items: _items(count: 50),
+            onChanged: (_) {},
+          ),
+        ),
       ),
     );
-
     await tester.tap(find.byType(ComboBox<String>));
     await tester.pumpAndSettle();
 
+    final selectedItems = find.byKey(const Key('item-25'));
+    expect(selectedItems, findsNWidgets(2));
+    final popupItemRect = tester.getRect(selectedItems.at(1));
+    expect(popupItemRect.top, greaterThanOrEqualTo(0));
+    expect(popupItemRect.bottom, lessThanOrEqualTo(220));
     expect(tester.takeException(), isNull);
-    expect(find.byKey(const Key('single-combo-box-item')), findsOneWidget);
+  });
+
+  testWidgets('popup constraints are capped by the viewport', (tester) async {
+    tester.view.physicalSize = const Size(240, 180);
+    tester.view.devicePixelRatio = 1;
+    addTearDown(tester.view.reset);
 
-    await tester.tap(find.byKey(const Key('single-combo-box-item')));
+    await tester.pumpWidget(
+      wrapApp(
+        child: ComboBox<String>(
+          popupConstraints: const BoxConstraints(
+            minWidth: 120,
+            maxWidth: 500,
+            minHeight: 120,
+            maxHeight: 500,
+          ),
+          items: _items(count: 100),
+          onChanged: (_) {},
+        ),
+      ),
+    );
+    await tester.tap(find.byType(ComboBox<String>));
     await tester.pumpAndSettle();
 
-    expect(selectedValue, 'something');
+    final list = find.byType(ListView);
+    expect(list, findsOneWidget);
+    final size = tester.getSize(list);
+    expect(size.width, lessThanOrEqualTo(240));
+    expect(size.height, lessThanOrEqualTo(180));
+    expect(tester.takeException(), isNull);
   });
 
-  testWidgets('ComboBox positioned at bottom opens without layout assertions', (
+  testWidgets('constrained popup anchors its selected item to the control', (
     tester,
   ) async {
-    const selectedValue = 'Two';
+    await tester.pumpWidget(
+      wrapApp(
+        child: ComboBox<String>(
+          value: '8',
+          popupConstraints: const BoxConstraints(minWidth: 180, maxHeight: 220),
+          items: _items(count: 30),
+          onChanged: (_) {},
+        ),
+      ),
+    );
+
+    await tester.tap(find.byType(ComboBox<String>));
+    await tester.pumpAndSettle();
+    final control = tester.getRect(find.text('Option 8').first);
+    final selected = tester.getRect(find.byKey(const Key('item-8')).last);
+    final popup = tester.getRect(find.byType(ListView));
+    expect(popup.top, greaterThanOrEqualTo(0));
+    expect(popup.bottom, lessThanOrEqualTo(tester.view.physicalSize.height));
+    expect(selected.top, greaterThanOrEqualTo(popup.top));
+    expect(selected.bottom, lessThanOrEqualTo(popup.bottom));
+    expect((selected.center.dy - control.center.dy).abs(), lessThan(24));
+    expect(tester.takeException(), isNull);
+  });
 
+  testWidgets('popup stays in bounds in RTL', (tester) async {
+    tester.view.physicalSize = const Size(240, 180);
+    tester.view.devicePixelRatio = 1;
+    addTearDown(tester.view.reset);
     await tester.pumpWidget(
       wrapApp(
-        child: SizedBox(
-          height: 602,
+        child: Directionality(
+          textDirection: TextDirection.rtl,
           child: Align(
-            alignment: Alignment.bottomCenter,
+            alignment: Alignment.topRight,
             child: ComboBox<String>(
-              value: selectedValue,
-              items: const [
-                ComboBoxItem<String>(
-                  key: Key('bottom-combo-item-one'),
-                  value: 'One',
-                  child: Text('One'),
-                ),
-                ComboBoxItem<String>(
-                  key: Key('bottom-combo-item-two'),
-                  value: 'Two',
-                  child: Text('Two'),
-                ),
-                ComboBoxItem<String>(
-                  key: Key('bottom-combo-item-three'),
-                  value: 'Three',
-                  child: Text('Three'),
-                ),
-              ],
+              items: _items(count: 12),
               onChanged: (_) {},
             ),
           ),
@@ -355,10 +481,146 @@ void main() {
 
     await tester.tap(find.byType(ComboBox<String>));
     await tester.pumpAndSettle();
+    final popupItemRect = tester.getRect(find.byKey(const Key('item-0')).last);
+    expect(popupItemRect.left, greaterThanOrEqualTo(0));
+    expect(popupItemRect.right, lessThanOrEqualTo(240));
+    expect(tester.takeException(), isNull);
+  });
 
+  testWidgets('popup portal is above a ContentDialog barrier', (tester) async {
+    await tester.pumpWidget(
+      wrapApp(
+        child: Builder(
+          builder: (context) => Button(
+            child: const Text('Show dialog'),
+            onPressed: () {
+              showDialog(
+                context: context,
+                builder: (_) => ContentDialog(
+                  content: ComboBox<String>(
+                    items: _items(count: 2),
+                    onChanged: (_) {},
+                  ),
+                ),
+              );
+            },
+          ),
+        ),
+      ),
+    );
+    await tester.tap(find.text('Show dialog'));
+    await tester.pumpAndSettle();
+    await tester.tap(find.byType(ComboBox<String>));
+    await tester.pumpAndSettle();
+    expect(find.byKey(const Key('item-1')), findsOneWidget);
     expect(tester.takeException(), isNull);
-    expect(find.byKey(const Key('bottom-combo-item-one')), findsWidgets);
-    expect(find.byKey(const Key('bottom-combo-item-two')), findsWidgets);
-    expect(find.byKey(const Key('bottom-combo-item-three')), findsWidgets);
+  });
+
+  testWidgets('hover does not move the indicator, keyboard movement does', (
+    tester,
+  ) async {
+    await tester.pumpWidget(
+      wrapApp(
+        child: ComboBox<String>(
+          value: '0',
+          items: _items(count: 3),
+          onChanged: (_) {},
+        ),
+      ),
+    );
+
+    await tester.tap(find.byType(ComboBox<String>));
+    await tester.pumpAndSettle();
+    expect(
+      find.byKey(const ValueKey('combo-box-selection-indicator')),
+      findsOneWidget,
+    );
+
+    final gesture = await tester.createGesture();
+    await gesture.moveTo(tester.getCenter(find.byKey(const Key('item-2'))));
+    await tester.pump();
+    expect(
+      find.byKey(const ValueKey('combo-box-selection-indicator')),
+      findsOneWidget,
+    );
+    await gesture.removePointer();
+
+    await tester.sendKeyEvent(LogicalKeyboardKey.arrowDown);
+    await tester.pump();
+    expect(
+      find.byKey(const ValueKey('combo-box-selection-indicator')),
+      findsNWidgets(2),
+    );
+
+    expect(
+      find.byKey(const ValueKey('combo-box-selection-indicator')),
+      findsNWidgets(2),
+    );
+  });
+
+  testWidgets('placeholder uses the secondary text color', (tester) async {
+    Color? placeholderColor;
+    await tester.pumpWidget(
+      wrapApp(
+        child: ComboBox<String>(
+          placeholder: Builder(
+            builder: (context) {
+              placeholderColor = DefaultTextStyle.of(context).style.color;
+              return const Text('Select an item');
+            },
+          ),
+          items: _items(count: 2),
+          onChanged: (_) {},
+        ),
+      ),
+    );
+
+    expect(
+      placeholderColor,
+      FluentTheme.of(
+        tester.element(find.byType(ComboBox<String>)),
+      ).resources.textFillColorSecondary,
+    );
+  });
+
+  testWidgets('scrolling the popup does not move its rectangle', (
+    tester,
+  ) async {
+    await tester.pumpWidget(
+      wrapApp(
+        child: ComboBox<String>(
+          value: '8',
+          popupConstraints: const BoxConstraints(maxHeight: 220),
+          items: _items(count: 30),
+          onChanged: (_) {},
+        ),
+      ),
+    );
+
+    await tester.tap(find.byType(ComboBox<String>));
+    await tester.pumpAndSettle();
+    final list = find.byType(ListView);
+    final before = tester.getRect(list);
+    await tester.drag(list, const Offset(0, -100));
+    await tester.pumpAndSettle();
+    expect(tester.getRect(list), before);
+  });
+
+  testWidgets('popup item content is centered in the compact row', (
+    tester,
+  ) async {
+    await tester.pumpWidget(
+      wrapApp(
+        child: ComboBox<String>(items: _items(count: 2), onChanged: (_) {}),
+      ),
+    );
+
+    await tester.tap(find.byType(ComboBox<String>));
+    await tester.pumpAndSettle();
+
+    final row = tester.getRect(find.byKey(const Key('item-0')));
+    final text = tester.getRect(find.text('Option 0'));
+    expect(row.height, lessThanOrEqualTo(kComboBoxItemHeight));
+    expect((row.center.dy - text.center.dy).abs(), lessThanOrEqualTo(1));
   });
 }