🐛 [UI/Fidelity] 'Combobox' + 'isExpanded:false' causes longest option to be displayed in two lines

[henry2man]

Describe the bug
Using Combobox with isExpanded: false causes longest option in dropdown to show in two lines. Maybe this is a padding problem/sizing problem?

To Reproduce

Combobox(
              isExpanded: false,
              onChanged: (option) => print("Option selected: option"),
              items: ["Windows", "MacOS", "Linux", "Web", "Android", "iOS"]
                  .map((e) => ComboboxItem(value: e, child: Text(e)))
                  .toList(),
              value: "Windows",
            )

Expected behavior
The list of options in the dropdown shows in one line

Screenshots

Additional context
Add any other context about the problem here.

[henry2man]

Changing this the issue is gone... but I'm not sure why we have here a constant value of 12px for the padding (maybe this comes from specification, I don't know):

Also the dropdown animation is nice because Text is placed in the same position.

diff --git a/lib/src/controls/form/combo_box.dart b/lib/src/controls/form/combo_box.dart
--- a/lib/src/controls/form/combo_box.dart	(revision 34980480d486530acbfe21f3f3954ab111c67e00)
+++ b/lib/src/controls/form/combo_box.dart	(date 1654098939196)
@@ -11,7 +11,7 @@
 
 const Duration _kComboboxMenuDuration = Duration(milliseconds: 300);
 const double _kMenuItemHeight = kPickerHeight;
-const EdgeInsets _kMenuItemPadding = EdgeInsets.symmetric(horizontal: 12.0);
+const EdgeInsets _kMenuItemPadding = EdgeInsets.symmetric(horizontal: 6.0);
 const EdgeInsetsGeometry _kAlignedButtonPadding = EdgeInsets.only(
   top: 4.0,
   bottom: 4.0,

[bdlukaa]

You can customize the Combobox width by wrapping it in a SizedBox and defining a width. The popup will take the width of the Combobox button. Can you try wrapping your Combobox in a SizedBox?

SizedBox(
  width: 150.0,
  child: Combobox(...),
),

[henry2man]

I did this as a workaround but key thing here is to have dinamically sized widgets isExpanded: false depending of Combobox items

[bdlukaa]

depending of Combobox items

The Combobox popup needs to have the same width as the combobox button, which means the content WILL overflow if the button is too short but the content is too long. The dev can set the combobox width, as well as placeholder content that will size the button correctly.

Closing this as invalid

[henry2man]

The Combobox popup needs to have the same width as the combobox button

The popup will be size according Combobox size, but if you open a Combobox the size of the popup is a little bit bigger (check the demo bellow). So I don't know why can't we add some extra size to the popup (and/or adjusting the padding, as I proposed) in order to solve this issue.

The dev can set the combobox width, as well as placeholder content that will size the button correctly

You indicate that the developer can set the width, but precisely what we want to do here is NOT to have to define this width, but rather that the width depends on the contents of the Combobox.

In other words, if you use isExpanded: false, how do you make it so that the contents don't look bad when the Combobox is opened? I don't see the way without having to hide and/or force the size of the items, but that's exactly what I don't want to do with this configuration.

Here it is a little demo comparing the equivalent component in Material (Dropdown) that do not have this behavior, displaying the same list of items successfully, regardless of every item content length:

Grabacion.de.pantalla.2022-06-30.a.las.8.11.36.mov

import 'dart:math';

import 'package:fluent_ui/fluent_ui.dart';
import 'package:flutter/material.dart' as mat;

void main() {
  runApp(ComboboxBugDemo());
}

class ComboboxBugDemo extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return FluentApp(routes: {"/": (context) => Main()});
  }
}

class Main extends StatelessWidget {
  const Main({
    Key? key,
  }) : super(key: key);

  static const chars = ['a', 'b', 'c', 'd', 'e', 'f', 'g', 'h'];

  @override
  Widget build(BuildContext context) {
    // generates a new Random object
    final _random = new Random();

    String? longestOption = null;
    List<String> items = [];
    for (int i = 0; i < 10; i++) {
      int wordsize = _random.nextInt(30);
      String word = "";
      for (int j = 0; j < wordsize; j++) {
        word += chars[_random.nextInt(chars.length)];
      }
      items.add(word);
      if (longestOption == null || longestOption.length < word.length) {
        longestOption = word;
      }
    }

    return NavigationView(
      appBar: NavigationAppBar(title: Text("FluentUI 382 demo")),
      content: Column(
        children: [
          Row(
            children: [
              Text("FluentUI + isExpanded: false"),
              Combobox<String>(
                  isExpanded: false,
                  onChanged: (e) {},
                  value: longestOption,
                  items: items
                      .map((e) => ComboboxItem<String>(
                            child: Text(e),
                            value: e,
                          ))
                      .toList())
            ],
          ),
          mat.Material(
            child: Row(
              children: [
                Text("Material + isExpanded: false"),
                mat.DropdownButton<String>(
                    isExpanded: false,
                    onChanged: (e) {},
                    value: longestOption,
                    items: items
                        .map((e) => mat.DropdownMenuItem<String>(
                              child: Text(e),
                              value: e,
                            ))
                        .toList())
              ],
            ),
          ),
        ],
      ),
    );
  }
}