Fix DropdownMenu does not rematch initialSelection when entries have changed (#155757)

bleroux · web-flow · commit 21381d843f3f · 2024-10-02T12:03:20.000Z
## Description This PR makes DropdownMenu rematching the initialSelection when the entries are updated. If the new entries contains one entry whose value matches `initialSelection` this entry's label is used to initialize the inner text field, if no entries matches `initialSelection` the text field is emptied. ## Related Issue Fixes [DropdownMenu.didUpdateWidget should re-match initialSelection when dropdownMenuEntries have changed](flutter/flutter#155660). ## Tests Adds 3 tests.
diff --git a/examples/api/lib/material/dropdown_menu/dropdown_menu.0.dart b/examples/api/lib/material/dropdown_menu/dropdown_menu.0.dart
@@ -2,6 +2,7 @@
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
+import 'package:collection/collection.dart';
 import 'package:flutter/material.dart';
 
 // Flutter code sample for [DropdownMenu]s. The first dropdown menu
@@ -14,6 +15,8 @@ void main() {
   runApp(const DropdownMenuExample());
 }
 
+typedef ColorEntry = DropdownMenuEntry<ColorLabel>;
+
 // DropdownMenuEntry labels and values for the first dropdown menu.
 enum ColorLabel {
   blue('Blue', Colors.blue),
@@ -25,21 +28,43 @@ enum ColorLabel {
   const ColorLabel(this.label, this.color);
   final String label;
   final Color color;
+
+  static final List<ColorEntry> entries = UnmodifiableListView<ColorEntry>(
+    values.map<ColorEntry>(
+      (ColorLabel color) => ColorEntry(
+        value: color,
+        label: color.label,
+        enabled: color.label != 'Grey',
+        style: MenuItemButton.styleFrom(
+          foregroundColor: color.color,
+        ),
+      ),
+    ),
+  );
 }
 
+typedef IconEntry  = DropdownMenuEntry<IconLabel>;
+
 // DropdownMenuEntry labels and values for the second dropdown menu.
 enum IconLabel {
   smile('Smile', Icons.sentiment_satisfied_outlined),
-  cloud(
-    'Cloud',
-    Icons.cloud_outlined,
-  ),
+  cloud('Cloud', Icons.cloud_outlined),
   brush('Brush', Icons.brush_outlined),
   heart('Heart', Icons.favorite);
 
   const IconLabel(this.label, this.icon);
   final String label;
   final IconData icon;
+
+  static final List<IconEntry> entries = UnmodifiableListView<IconEntry>(
+    values.map<IconEntry>(
+      (IconLabel icon) => IconEntry(
+        value: icon,
+        label: icon.label,
+        leadingIcon: Icon(icon.icon),
+      ),
+    ),
+  );
 }
 
 class DropdownMenuExample extends StatefulWidget {
@@ -85,18 +110,7 @@ class _DropdownMenuExampleState extends State<DropdownMenuExample> {
                           selectedColor = color;
                         });
                       },
-                      dropdownMenuEntries: ColorLabel.values.map<DropdownMenuEntry<ColorLabel>>(
-                        (ColorLabel color) {
-                          return DropdownMenuEntry<ColorLabel>(
-                            value: color,
-                            label: color.label,
-                            enabled: color.label != 'Grey',
-                            style: MenuItemButton.styleFrom(
-                              foregroundColor: color.color,
-                            ),
-                          );
-                        }
-                      ).toList(),
+                      dropdownMenuEntries: ColorLabel.entries,
                     ),
                     const SizedBox(width: 24),
                     DropdownMenu<IconLabel>(
@@ -114,15 +128,7 @@ class _DropdownMenuExampleState extends State<DropdownMenuExample> {
                           selectedIcon = icon;
                         });
                       },
-                      dropdownMenuEntries: IconLabel.values.map<DropdownMenuEntry<IconLabel>>(
-                        (IconLabel icon) {
-                          return DropdownMenuEntry<IconLabel>(
-                            value: icon,
-                            label: icon.label,
-                            leadingIcon: Icon(icon.icon),
-                          );
-                        },
-                      ).toList(),
+                      dropdownMenuEntries: IconLabel.entries,
                     ),
                   ],
                 ),
diff --git a/examples/api/lib/material/dropdown_menu/dropdown_menu.1.dart b/examples/api/lib/material/dropdown_menu/dropdown_menu.1.dart
@@ -2,6 +2,7 @@
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
+import 'package:collection/collection.dart';
 import 'package:flutter/material.dart';
 
 /// Flutter code sample for [DropdownMenu].
@@ -34,7 +35,12 @@ class DropdownMenuExample extends StatefulWidget {
   State<DropdownMenuExample> createState() => _DropdownMenuExampleState();
 }
 
+typedef MenuEntry  = DropdownMenuEntry<String>;
+
 class _DropdownMenuExampleState extends State<DropdownMenuExample> {
+  static final List<MenuEntry> menuEntries = UnmodifiableListView<MenuEntry>(
+    list.map<MenuEntry>((String name) => MenuEntry(value: name, label: name)),
+  );
   String dropdownValue = list.first;
 
   @override
@@ -47,12 +53,7 @@ class _DropdownMenuExampleState extends State<DropdownMenuExample> {
           dropdownValue = value!;
         });
       },
-      dropdownMenuEntries: list.map<DropdownMenuEntry<String>>((String value) {
-        return DropdownMenuEntry<String>(
-          value: value,
-          label: value
-        );
-      }).toList(),
+      dropdownMenuEntries: menuEntries,
     );
   }
 }
diff --git a/examples/api/lib/material/dropdown_menu/dropdown_menu.2.dart b/examples/api/lib/material/dropdown_menu/dropdown_menu.2.dart
@@ -2,6 +2,7 @@
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
+import 'package:collection/collection.dart';
 import 'package:flutter/material.dart';
 
 /// Flutter code sample for [DropdownMenu].
@@ -33,7 +34,12 @@ class DropdownMenuExample extends StatefulWidget {
   State<DropdownMenuExample> createState() => _DropdownMenuExampleState();
 }
 
+typedef MenuEntry = DropdownMenuEntry<String>;
+
 class _DropdownMenuExampleState extends State<DropdownMenuExample> {
+  static final List<MenuEntry> menuEntries = UnmodifiableListView<MenuEntry>(
+    list.map<MenuEntry>((String name) => MenuEntry(value: name, label: name)),
+  );
   String dropdownValue = list.first;
 
   @override
@@ -62,10 +68,7 @@ class _DropdownMenuExampleState extends State<DropdownMenuExample> {
                     dropdownValue = value!;
                   });
                 },
-                dropdownMenuEntries:
-                    list.map<DropdownMenuEntry<String>>((String value) {
-                  return DropdownMenuEntry<String>(value: value, label: value);
-                }).toList(),
+                dropdownMenuEntries: menuEntries,
               ),
               const Text('Text cursor is shown when hovering over the DropdownMenu.'),
             ],
@@ -92,10 +95,7 @@ class _DropdownMenuExampleState extends State<DropdownMenuExample> {
                     dropdownValue = value!;
                   });
                 },
-                dropdownMenuEntries:
-                    list.map<DropdownMenuEntry<String>>((String value) {
-                  return DropdownMenuEntry<String>(value: value, label: value);
-                }).toList(),
+                dropdownMenuEntries: menuEntries,
               ),
               const Text('Clickable cursor is shown when hovering over the DropdownMenu.'),
             ],
@@ -123,10 +123,7 @@ class _DropdownMenuExampleState extends State<DropdownMenuExample> {
                     dropdownValue = value!;
                   });
                 },
-                dropdownMenuEntries:
-                    list.map<DropdownMenuEntry<String>>((String value) {
-                  return DropdownMenuEntry<String>(value: value, label: value);
-                }).toList(),
+                dropdownMenuEntries: menuEntries,
               ),
               const Text('Default cursor is shown when hovering over the DropdownMenu.'),
             ],
@@ -154,10 +151,7 @@ class _DropdownMenuExampleState extends State<DropdownMenuExample> {
                     dropdownValue = value!;
                   });
                 },
-                dropdownMenuEntries:
-                    list.map<DropdownMenuEntry<String>>((String value) {
-                  return DropdownMenuEntry<String>(value: value, label: value);
-                }).toList(),
+                dropdownMenuEntries: menuEntries,
               ),
               const Text('Default cursor is shown when hovering over the DropdownMenu.'),
             ],
diff --git a/packages/flutter/lib/src/material/dropdown_menu.dart b/packages/flutter/lib/src/material/dropdown_menu.dart
@@ -497,6 +497,18 @@ class _DropdownMenuState<T> extends State<DropdownMenu<T>> {
   bool _menuHasEnabledItem = false;
   TextEditingController? _localTextEditingController;
 
+  TextEditingValue get _initialTextEditingValue {
+    for (final DropdownMenuEntry<T> entry in filteredEntries) {
+      if (entry.value == widget.initialSelection) {
+        return TextEditingValue(
+          text: entry.label,
+          selection: TextSelection.collapsed(offset: entry.label.length),
+        );
+      }
+    }
+    return TextEditingValue.empty;
+  }
+
   @override
   void initState() {
     super.initState();
@@ -509,14 +521,8 @@ class _DropdownMenuState<T> extends State<DropdownMenu<T>> {
     filteredEntries = widget.dropdownMenuEntries;
     buttonItemKeys = List<GlobalKey>.generate(filteredEntries.length, (int index) => GlobalKey());
     _menuHasEnabledItem = filteredEntries.any((DropdownMenuEntry<T> entry) => entry.enabled);
+    _localTextEditingController?.value = _initialTextEditingValue;
 
-    final int index = filteredEntries.indexWhere((DropdownMenuEntry<T> entry) => entry.value == widget.initialSelection);
-    if (index != -1) {
-      _localTextEditingController?.value = TextEditingValue(
-        text: filteredEntries[index].label,
-        selection: TextSelection.collapsed(offset: filteredEntries[index].label.length),
-      );
-    }
     refreshLeadingPadding();
   }
 
@@ -554,18 +560,19 @@ class _DropdownMenuState<T> extends State<DropdownMenu<T>> {
       filteredEntries = widget.dropdownMenuEntries;
       buttonItemKeys = List<GlobalKey>.generate(filteredEntries.length, (int index) => GlobalKey());
       _menuHasEnabledItem = filteredEntries.any((DropdownMenuEntry<T> entry) => entry.enabled);
+      // If the text field content matches one of the new entries do not rematch the initialSelection.
+      final bool isCurrentSelectionValid = filteredEntries.any(
+        (DropdownMenuEntry<T> entry) => entry.label == _localTextEditingController?.text
+      );
+      if (!isCurrentSelectionValid) {
+        _localTextEditingController?.value = _initialTextEditingValue;
+      }
     }
     if (oldWidget.leadingIcon != widget.leadingIcon) {
       refreshLeadingPadding();
     }
     if (oldWidget.initialSelection != widget.initialSelection) {
-      final int index = filteredEntries.indexWhere((DropdownMenuEntry<T> entry) => entry.value == widget.initialSelection);
-      if (index != -1) {
-        _localTextEditingController?.value = TextEditingValue(
-          text: filteredEntries[index].label,
-          selection: TextSelection.collapsed(offset: filteredEntries[index].label.length),
-        );
-      }
+      _localTextEditingController?.value = _initialTextEditingValue;
     }
   }
 
diff --git a/packages/flutter/test/material/dropdown_menu_test.dart b/packages/flutter/test/material/dropdown_menu_test.dart
