Repository navigation
DropdownMenu shows incorrect currentHighlight #136735
Description
Activity
- addedframeworkflutter/packages/flutter repository. See also f: labels.flutter/packages/flutter repository. See also f: labels.p: material_uimaterial_ui package in flutter/packagesmaterial_ui package in flutter/packagesP2Important issues not at the top of the work listImportant issues not at the top of the work listteam-designOwned by Design Languages teamOwned by Design Languages team
on Oct 17, 2023 I have a repro! This is what I thought, but is this expected behavior @QuncCccccc since it is configured to filter based on the content of the text field?
Selected
Readand then reopen the menu to observe:// Copyright 2014 The Flutter Authors. All rights reserved. // Use of this source code is governed by a BSD-style license that can be // found in the LICENSE file. import 'package:flutter/material.dart'; // Flutter code sample for [DropdownMenu]s. The first dropdown menu // has the default outlined border and demos using the // [DropdownMenuEntry] style parameter to customize its appearance. // The second dropdown menu customizes the appearance of the dropdown // menu's text field with its [InputDecorationTheme] parameter. void main() { runApp(const DropdownMenuExample()); } class DropdownMenuExample extends StatefulWidget { const DropdownMenuExample({super.key}); @override State<DropdownMenuExample> createState() => _DropdownMenuExampleState(); } class _DropdownMenuExampleState extends State<DropdownMenuExample> { final TextEditingController textController = TextEditingController(); Text? selectedText; @override Widget build(BuildContext context) { return MaterialApp( home: Scaffold( body: Center( child: DropdownMenu<Text>( initialSelection: const Text('All'), controller: textController, requestFocusOnTap: true, label: const Text('Text'), onSelected: (Text? text) { setState(() { selectedText = text; }); }, dropdownMenuEntries: const <DropdownMenuEntry<Text>>[ DropdownMenuEntry<Text>(value: Text('All'), label: 'All'), DropdownMenuEntry<Text>(value: Text('Unread'), label: 'Unread'), DropdownMenuEntry<Text>(value: Text('Read'), label: 'Read'), ], ), ), ), ); } }
Thanks for the code sample! Taking a look.
Ah interesting. It looks like when dropdown menu is looking for the target, it will show the first target which contains the text in the text field instead of getting an exact match😂, so this is expected behavior but looks bad in this use case... If we put 'Read' in the second place, it will work correctly. I can add an option for users to define their own formula to get the result, or provide a flag to find the "exact match".
- addedtriaged-designTriaged by Design Languages teamTriaged by Design Languages team
on Oct 18, 2023 I was scratching my head until I've found this issue, surprised it's been reported only recently as I'm on
3.12.0that is from 4 months ago. Exact same thing is happening with this example:- ...
- Caravan Park
- ...
- Park
When the "Park" is selected, "Caravan Park" is highlighted. Strange thing is their value is not string but enums and it does give the correct enum value with the
onSelectedevent. I would simply expect that widget to highlight first==matching value, not the string label.contains()test result, instead of writing a custom "search algorithm" TBH...When the "Park" is selected, "Caravan Park" is highlighted. Strange thing is their value is not string but enums and it does give the correct enum value with the
onSelectedevent. I would simply expect that widget to highlight first==matching value, not the string label.contains()test result, instead of writing a custom "search algorithm" TBH...Thanks for the suggestion! I think comparing value would be a little difficult because searching happens when we are typing text in the text field, but the entry's value could be any types.
Reacted by kirpit- added a commit that references this issue
on Oct 19, 2023 This thread has been automatically locked since there has not been any recent activity after it was closed. If you are still experiencing a similar issue, please open a new bug, including the output of
flutter doctor -vand a minimal reproduction of the issue.- locked as resolved and limited conversation to collaborators
on Nov 2, 2023
b/305662376
Customer reports the current highlight of their DropdownMenu is not correct.
I have not been able to reproduce this in an independent code sample, but the customer code and a video of the bug is available in the internal bug listed above.
Steps:
@QuncCccccc do you have any thoughts on this? It looks like currentHighlight is incorrect.
I think this could be the way we choose the currentHighlight based on filtering. The customer case has 3 items in the menu, in this order
The bug presents itself when
Readis selected and the menu is reopened, andUnreadis highlighted instead. At this pointReadis in the text field of the menu, so we could be highlighting the first match to the Stringread. Maybe?