🐛 `ComboBox` throws rendering exception when it is rendered at the bottom of the screen

[printpagestopdf]

ComboBox with Windows11 fluent_ui ^4.15.1:
ComboBox is placed at the bottom of the window.
On opening the popup this exception is thrown in debug mode:

════════ Exception caught by rendering library ═════════════════════════════════
'package:fluent_ui/src/controls/form/combo_box.dart': Failed assertion: line 483 pos 16: 'menuLimits.top + menuLimits.height <= size.height': is not true.
The relevant error-causing widget was:
NavigationView-[LabeledGlobalKey#c0330] NavigationView:file:///H:/Source/Flutter/caldav_todo/lib/core/shell/app_shell.dart:39:12
════════════════════════════════════════════════════════════════════════════════

The popup opens at an arbitrary Position inside the window

[WinXaito]

ComboBox has been updated recently. (#1347)

Could you try with fluent_ui 4.16.1 and see if the same problem occurs ? And if it the case, please provide a minimal reproductible example.

[printpagestopdf]

Updated to 4.16.1 but problem still appears. Here is a simple Widget. If this in used inside a window the ComboBox is at the bottom and the exception occurs when you open the popup:

import 'package:fluent_ui/fluent_ui.dart';

class Dummy extends StatefulWidget {
  const Dummy({super.key});

  @override
  State<Dummy> createState() => _DummyState();
}

class _DummyState extends State<Dummy> {
  String? val = "Two";

  @override
  void initState() {
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return Column(
      mainAxisAlignment: MainAxisAlignment.end,
      mainAxisSize: MainAxisSize.max,
      children: [
        ComboBox<String>(
          style: FluentTheme.of(context).typography.body,
          placeholder: const Text("ohne Ende"),
          value: val,
          items: [
            const ComboBoxItem(value: "One", child: Text("One")),
            const ComboBoxItem(value: "Two", child: Text("Two")),
            const ComboBoxItem(value: "Three", child: Text("Three")),
          ],
          onChanged: (value) {
            setState(() {
              val = value;
            });
          },
        ),
      ],
    );
  }
}

[WinXaito]

I could reproduce, happend when the ComboBox is fully at the bottom:

This assert is failing: https://github.com/bdlukaa/fluent_ui/blob/v4.16.1/lib/src/controls/form/combo_box.dart#L483

The following assertion was thrown during performLayout():
484.0 + 120.0 <= 602.0 //<-- I printed the values of menuLimits.top + menuLimits.height <= size.height
'package:fluent_ui/src/controls/form/combo_box.dart':
Failed assertion: line 483 pos 16: 'menuLimits.top + menuLimits.height <= size.height'

@printpagestopdf has a temporary fix, you can wrap your ComboBox in a Padding with a bottom insets of 2. It should resolve your problem.

Padding(
  padding: EdgeInsets.only(bottom: 2),
  child: ComboBox<String>(
    style: FluentTheme.of(context).typography.body,
    placeholder: const Text("ohne Ende"),
    value: val,
    items: [
      const ComboBoxItem(value: "One", child: Text("One")),
      const ComboBoxItem(value: "Two", child: Text("Two")),
      const ComboBoxItem(value: "Three", child: Text("Three")),
    ],
    onChanged: (value) {
      setState(() {
        val = value;
      });
    },
  ),
),

[printpagestopdf]

Thank you very much for this fast answer and workaround. Only a few hours too late for me my workaround was to make a custom widget with a flyout that is under my control. But your workaround is much more usable!