Comboboxes

CHANGELOG.md

@@ -67,6 +67,9 @@ Date format: DD/MM/YYYY
     ...
   )
   ```
+- `Combobox` updates ([#454](https://github.com/bdlukaa/fluent_ui/pull/454)):
+  - Popup size is now correctly calculated ([#413](https://github.com/bdlukaa/fluent_ui/issues/413))
+  - Correctly clip the popup while performing the animation ([#379](https://github.com/bdlukaa/fluent_ui/issues/379))
 
 ## [4.0.0-pre.2] - Tabs, Tiles and Bugs - [23/07/2022]
 

README.md

@@ -1029,7 +1029,7 @@ AutoSuggestBox(
 
 ## Combo Box
 
-Use a combo box (also known as a drop-down list) to present a list of items that a user can select from. A combo box starts in a compact state and expands to show a list of selectable items. A ListBox is similar to a combo box, but is not collapsible/does not have a compact state. [Learn more](https://docs.microsoft.com/en-us/windows/apps/design/controls/combo-box)
+Use a combo box (also known as a drop-down list) to present a list of items that a user can select from. A combo box starts in a compact state and expands to show a list of selectable items. [Learn more](https://docs.microsoft.com/en-us/windows/apps/design/controls/combo-box)
 
 Here's an example of how to create a basic combo box:
 

example/lib/screens/forms/auto_suggest_box.dart

@@ -22,7 +22,7 @@ class AutoSuggestBoxPage extends ScrollablePage {
           SizedBox(
             width: 350.0,
             child: AutoSuggestBox(
-              items: _cats
+              items: cats
                   .map<AutoSuggestBoxItem>(
                     (cat) => AutoSuggestBoxItem(
                       value: cat,
@@ -48,13 +48,20 @@ class AutoSuggestBoxPage extends ScrollablePage {
 String? selectedCat;
 
 AutoSuggestBox(
-  items: _cats,
+  items: cats.map((cat) {
+    return AutoSuggestBoxItem(
+      value: cat,
+      onFocusChange: (focused) {
+        if (focused) debugPrint('Focused \$cat');
+      }
+    );
+  }).toList(),
   onSelected: (item) {
     setState(() => selected = item);
   },
 ),
 
-const _cats = <String>[
+const cats = <String>[
   'Abyssinian',
   'Aegean',
   'American Bobtail',
@@ -66,7 +73,7 @@ const _cats = <String>[
   }
 }
 
-const _cats = <String>[
+const cats = <String>[
   'Abyssinian',
   'Aegean',
   'American Bobtail',

example/lib/screens/forms/combobox.dart

@@ -2,8 +2,11 @@ import 'package:example/widgets/card_highlight.dart';
 import 'package:example/widgets/page.dart';
 import 'package:fluent_ui/fluent_ui.dart';
 
+import 'auto_suggest_box.dart';
+
 class ComboboxPage extends ScrollablePage {
   String? selectedColor = 'Green';
+  String? selectedCat;
   bool disabled = false;
 
   @override
@@ -32,32 +35,93 @@ class ComboboxPage extends ScrollablePage {
       CardHighlight(
         child: Row(children: [
           Expanded(
-            child:
-                Column(crossAxisAlignment: CrossAxisAlignment.start, children: [
-              SizedBox(
-                width: 200,
-                child: Combobox<String>(
-                  value: selectedColor,
-                  items: colors.entries.map((e) {
-                    return ComboboxItem(
-                      child: Text(e.key),
-                      value: e.key,
-                    );
-                  }).toList(),
-                  onChanged: disabled
-                      ? null
-                      : (color) {
-                          setState(() => selectedColor = color);
-                        },
+            child: Column(
+              crossAxisAlignment: CrossAxisAlignment.start,
+              children: [
+                SizedBox(
+                  width: 200,
+                  child: Combobox<String>(
+                    value: selectedColor,
+                    items: colors.entries.map((e) {
+                      return ComboboxItem(
+                        child: Text(e.key),
+                        value: e.key,
+                      );
+                    }).toList(),
+                    onChanged: disabled
+                        ? null
+                        : (color) {
+                            setState(() => selectedColor = color);
+                          },
+                  ),
+                ),
+                Container(
+                  margin: const EdgeInsets.only(top: 8.0),
+                  height: 30,
+                  width: 100,
+                  color: colors[selectedColor],
+                ),
+              ],
+            ),
+          ),
+          ToggleSwitch(
+            checked: disabled,
+            onChanged: (v) {
+              setState(() => disabled = v);
+            },
+            content: const Text('Disabled'),
+          ),
+        ]),
+        codeSnippet: '''
+// Green by default
+Color selectedColor = 'Green';
+
+Combobox<String>(
+  value: selectedColor,
+  items: colors.entries.map((e) {
+    return ComboboxItem(
+      child: Text(e.key),
+      value: e.key,
+    );
+  }).toList(),
+  onChanged: disabled ? null : (color) => setState(() => selectedColor = color),
+)''',
+      ),
+      subtitle(
+        content: const Text('A Combobox with a long list of items'),
+      ),
+      CardHighlight(
+        child: Row(children: [
+          Expanded(
+            child: Column(
+              crossAxisAlignment: CrossAxisAlignment.start,
+              children: [
+                SizedBox(
+                  width: 300,
+                  child: Combobox<String>(
+                    value: selectedCat,
+                    items: cats.map<ComboboxItem<String>>((e) {
+                      return ComboboxItem<String>(
+                        child: Text(e),
+                        value: e,
+                      );
+                    }).toList(),
+                    onChanged: disabled
+                        ? null
+                        : (color) {
+                            setState(() => selectedCat = color);
+                          },
+                    placeholder: const Text('Select a cat breed'),
+                  ),
+                ),
+                Container(
+                  margin: const EdgeInsets.only(top: 8.0),
+                  height: 30,
+                  width: 100,
+                  child: Text(selectedCat ?? ''),
                 ),
-              ),
-              Container(
-                margin: const EdgeInsets.only(top: 8.0),
-                height: 30,
-                width: 100,
-                color: colors[selectedColor],
-              ),
-            ]),
+              ],
+            ),
           ),
           ToggleSwitch(
             checked: disabled,