Skip to content

[Web][Desktop]: The dropdown of an AutoComplete widget should be dismissed by an ESC hit or by clicking outside area. #84416

Closed
#97790
Closed
[Web][Desktop]: The dropdown of an AutoComplete widget should be dismissed by an ESC hit or by clicking outside area.#84416
#97790
Labels
P2Important issues not at the top of the work lista: desktopRunning on desktopfound in release: 2.2Found to occur in 2.2frameworkflutter/packages/flutter repository. See also f: labels.has reproducible stepsThe issue has been confirmed reproducible and is ready to work onp: material_uimaterial_ui package in flutter/packagesr: fixedIssue is closed as already fixed in a newer version

Description

@johnwangwjq
johnwangwjq
opened on Jun 11, 2021

The default behavior of this component is to shows the dropdown right after it get focus(e.g, you clicked in the inputfield). It covered the (important) thing underneath. The problem is the dropdown cannot be dissmissed by any clicking other place or an ESC hit, it stay there until you deliberately input some wrong words or click an item which leads to unwanted result.

You can check the result by the demo on dartpad which is just a copy-paste from the offical document.

BTW, dartpad itself has problem to show the demo correctly. You have to click the run button at least twice to show all the stuff on screen. I don't know why.

Activity

  1. darshankawar
    added
    in triagePresently being triaged by the triage team
    on Jun 11, 2021

  2. darshankawar commented on Jun 11, 2021

    @darshankawar
    darshankawar
    on Jun 11, 2021
    Member

    Verified this behavior on latest stable and seems to be occuring on web and desktop platforms, ie, tapping escape key doesn't close the dropdown / autocomplete widget list.

    flutter doctor -v 
    [✓] Flutter (Channel stable, 2.2.1, on Mac OS X 10.15.4 19E2269 darwin-x64,
    locale en-GB)
    • Flutter version 2.2.1 at /Users/dhs/documents/fluttersdk/flutter
    • Framework revision 02c026b03c (4 days ago), 2021-05-27 12:24:44 -0700
    • Engine revision 0fdb562ac8
    • Dart version 2.13.1

[✓] Xcode - develop for iOS and macOS
    • Xcode at /Applications/Xcode.app/Contents/Developer
    • Xcode 12.3, Build version 12C33
    • CocoaPods version 1.10.1

[✓] Chrome - develop for the web
    • Chrome at /Applications/Google Chrome.app/Contents/MacOS/Google Chrome

[✓] VS Code (version 1.55.2)
    • VS Code at /Applications/Visual Studio Code.app/Contents
    • Flutter extension version 3.21.0

[✓] Connected device (4 available)
    • Darshan's iphone (mobile)  • 21150b119064aecc249dfcfe05e259197461ce23 •
      ios            • iOS 14.4.1
    • iPhone 12 Pro Max (mobile) • A5473606-0213-4FD8-BA16-553433949729     •
      ios            • com.apple.CoreSimulator.SimRuntime.iOS-14-3 (simulator)
    • macOS (desktop)            • macos                                    •
      darwin-x64     • Mac OS X 10.15.4 19E2269 darwin-x64
    • Chrome (web)               • chrome                                   •
      web-javascript • Google Chrome 91.0.4472.77

• No issues found!

    Code sample: https://dartpad.dev/7cb153e960dbb167e19862506b3de374?null_safety=true

  3. darshankawar
    added
    a: desktopRunning on desktop
    p: material_uimaterial_ui package in flutter/packages
    found in release: 2.2Found to occur in 2.2
    frameworkflutter/packages/flutter repository. See also f: labels.
    has reproducible stepsThe issue has been confirmed reproducible and is ready to work on
    platform-webWeb applications specifically
    and removed
    in triagePresently being triaged by the triage team
    on Jun 11, 2021
  4. darshankawar
    changed the title [-]The dropdown of an AutoComplete widget should could be dismissed by an ESC hit or clicke outside area.[/-] [+][Web][Desktop]: The dropdown of an AutoComplete widget should be dismissed by an ESC hit or by clicking outside area.[/+] on Jun 11, 2021

  5. HansMuller commented on Jun 11, 2021

    @HansMuller
    HansMuller
    on Jun 11, 2021
    Contributor

    CC @gspencergoog @darrenaustin @jonahwilliams - being able to dismiss in-progress mouse gestures with the escape key is a common case for custom UI as well as built-ins like AutoComplete. Maybe we a sample that documents how to handle this? Definitely need to support it for AutoComplete and menus in general.

  6. jonahwilliams commented on Jun 11, 2021

    @jonahwilliams
    jonahwilliams
    on Jun 11, 2021
    Contributor

    with #82575 , mouse clicks outside of the area will close the drop down. Is escape specific to UI elements that pop up info like auto complete and dropdown, or are there more examples?

  7. HansMuller commented on Jun 11, 2021

    @HansMuller
    HansMuller
    on Jun 11, 2021
    Contributor

    I don't know of all of the uses, and they're likely to be platform specific. Some examples that I can verify just now (MacOS)

    • It typically dismisses dialogs.
    • Clears the selection in the Terminal app
    • In Chrome's address bar, when the text cursor is visible, clears the focus and restores the previous selection
    • In spotlight search it doesn't dismiss the dialog, it just clears the current search entry (likewise for the search field in the System preferences panel)

  8. jonahwilliams commented on Jun 11, 2021

    @jonahwilliams
    jonahwilliams
    on Jun 11, 2021
    Contributor

    we could treat escape as a dismiss intent for modal routes, that would cover most of the general use cases. Text selection interaction I'm less sure of

  9. gspencergoog commented on Jun 11, 2021

    @gspencergoog
    gspencergoog
    on Jun 11, 2021
    Contributor

    Escape is already bound to DismissIntent in the default shortcuts, and is already the action that occurs for Modal routes. If that's not working, we should fix it.

  10. darrenaustin commented on Jun 11, 2021

    @darrenaustin
    darrenaustin
    on Jun 11, 2021
    Contributor

    Yup, @gspencergoog is correct here, modal routes already support dismissal with the escape key by default. The issue for the autocomplete options is that it isn't using a modal route to show the options. I have a fix for the escape key mapping that I will put up shortly.

    Fixing the tap outside the options to dismiss it will require some thinking, as there is a way to configure the options to not use a popup, but instead show up somewhere else in the application. That makes it hard to put a dismiss barrier over everything under the options as they are part of the app screen.

  11. jonahwilliams commented on Jun 11, 2021

    @jonahwilliams
    jonahwilliams
    on Jun 11, 2021
    Contributor

    Fixing the tap outside the options to dismiss it will require some thinking, as there is a way to configure the options to not use a popup, but instead show up somewhere else in the application. That makes it hard to put a dismiss barrier over everything under the options as they are part of the app screen.

    This should already be fixed via #82575

  12. jonahwilliams commented on Jun 11, 2021

    @jonahwilliams
    jonahwilliams
    on Jun 11, 2021
    Contributor

    ahh but just for clicks, not for taps.

  13. yjbanov
    removed
    platform-webWeb applications specifically
    on Jun 17, 2021

  14. yjbanov commented on Jun 17, 2021

    @yjbanov
    yjbanov
    on Jun 17, 2021
    Contributor

    This should be fixed in the framework. Removing the web label.

  15. gspencergoog commented on Jun 24, 2021

    @gspencergoog
    gspencergoog
    on Jun 24, 2021
    Contributor

    @jonahwilliams Are you working on this one?

  16. gspencergoog
    added
    P2Important issues not at the top of the work list
    on Jun 24, 2021

  17. jonahwilliams commented on Jun 24, 2021

    @jonahwilliams
    jonahwilliams
    on Jun 24, 2021
    Contributor

    I am not, I'm not sure what the correct behavior is

  18. markusaksli-nc commented on Feb 4, 2022

    @markusaksli-nc
    markusaksli-nc
    on Feb 4, 2022
    Contributor

    Gave a shot at implementing what should be the expected behavior here in #97790. There are a couple of interesting little details I could use some input on.

  19. fluttergithubbot
    closed this as completedin #97790on Feb 16, 2022
  20. darshankawar
    added
    r: fixedIssue is closed as already fixed in a newer version
    on Feb 17, 2022

  21. github-actions commented on Mar 3, 2022

    @github-actions
    github-actionsbot
    on Mar 3, 2022

    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.

  22. github-actions
    locked as resolved and limited conversation to collaborators on Mar 3, 2022
  23. helinanever
    moved this to Done (PR merged) in Nevercodeon Jul 18, 2022
  24. helinanever
    added this to Nevercodeon Jul 18, 2022
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Assignees

No one assigned

    Labels

    P2Important issues not at the top of the work lista: desktopRunning on desktopfound in release: 2.2Found to occur in 2.2frameworkflutter/packages/flutter repository. See also f: labels.has reproducible stepsThe issue has been confirmed reproducible and is ready to work onp: material_uimaterial_ui package in flutter/packagesr: fixedIssue is closed as already fixed in a newer version

    Type

    No type

    Projects

    • Nevercode
      Status
      Done (PR merged)

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions