Skip to content

DropdownMenu shows incorrect currentHighlight #136735

Description

@Piinks

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:

  1. DropdownMenu has initial index of 0.
  2. Customer opens menu, selects index 2, menu closes.
  3. Customer opens menu, index 1 is highlighted.

@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

  • All
  • Unread
  • Read

The bug presents itself when Read is selected and the menu is reopened, and Unread is highlighted instead. At this point Read is in the text field of the menu, so we could be highlighting the first match to the String read. Maybe?

Activity

  1. added
    frameworkflutter/packages/flutter repository. See also f: labels.
    p: material_uimaterial_ui package in flutter/packages
    P2Important issues not at the top of the work list
    team-designOwned by Design Languages team
    on Oct 17, 2023
  2. Piinks commented on Oct 17, 2023

    @Piinks
    ContributorAuthor

    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 Read and 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'),
                ],
              ),
            ),
          ),
        );
      }
    }
  3. QuncCccccc commented on Oct 17, 2023

    @QuncCccccc
    Contributor

    Thanks for the code sample! Taking a look.

  4. QuncCccccc commented on Oct 17, 2023

    @QuncCccccc
    Contributor

    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".

  5. self-assigned this
    on Oct 17, 2023
  6. kirpit commented on Oct 18, 2023

    @kirpit

    I was scratching my head until I've found this issue, surprised it's been reported only recently as I'm on 3.12.0 that 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 onSelected event. 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...

  7. QuncCccccc commented on Oct 19, 2023

    @QuncCccccc
    Contributor

    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 onSelected event. 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.

  8. added a commit that references this issue on Oct 19, 2023
    40776d0
  9. github-actions commented on Nov 2, 2023

    @github-actions

    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 -v and a minimal reproduction of the issue.

  10. locked as resolved and limited conversation to collaborators on Nov 2, 2023
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Assignees

Labels

P2Important issues not at the top of the work listcustomer: chalk (g3)frameworkflutter/packages/flutter repository. See also f: labels.p: material_uimaterial_ui package in flutter/packagesteam-designOwned by Design Languages teamtriaged-designTriaged by Design Languages team

Type

No type

Projects

No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions