Fix Selected DropdownMenuItem isn't highlighted on mobile #167874

huycozy · 2025-04-26T11:23:12Z

Description

The bug is about the previously selected DropdownMenuItem isn't highlighted on mobile while it works on Web and desktop. The reason is that FocusManager.instance.highlightMode has fallen to FocusHighlightMode.touch on mobile by default (or touch device without mouse in general):

flutter/packages/flutter/lib/src/material/dropdown.dart

Lines 172 to 175 in 6f220d3

    
           final bool inTraditionalMode = switch (FocusManager.instance.highlightMode) { 
        
             FocusHighlightMode.touch => false, 
        
             FocusHighlightMode.traditional => true, 
        
           };

flutter/packages/flutter/lib/src/widgets/focus_manager.dart

Lines 2335 to 2353 in 7d56be4

    
           static FocusHighlightMode get _defaultModeForPlatform { 
        
             // Assume that if we're on one of the mobile platforms, and there's no mouse 
        
             // connected, that the initial interaction will be touch-based, and that 
        
             // it's traditional mouse and keyboard on all other platforms. 
        
             // 
        
             // This only affects the initial value: the ongoing value is updated to a 
        
             // known correct value as soon as any pointer/keyboard events are received. 
        
             switch (defaultTargetPlatform) { 
        
               case TargetPlatform.android: 
        
               case TargetPlatform.fuchsia: 
        
               case TargetPlatform.iOS: 
        
                 if (WidgetsBinding.instance.mouseTracker.mouseIsConnected) { 
        
                   return FocusHighlightMode.traditional; 
        
                 } 
        
                 return FocusHighlightMode.touch; 
        
               case TargetPlatform.linux: 
        
               case TargetPlatform.macOS: 
        
               case TargetPlatform.windows: 
        
                 return FocusHighlightMode.traditional;

flutter/packages/flutter/lib/src/widgets/focus_manager.dart

Lines 1741 to 1748 in 7d56be4

    
             /// If [highlightMode] returns [FocusHighlightMode.touch], then widgets should 
        
             /// not draw their focus highlight unless they perform text entry. 
        
             /// 
        
             /// If [highlightMode] returns [FocusHighlightMode.traditional], then widgets should 
        
             /// draw their focus highlight whenever they are focused. 
        
             // Don't want to set _highlightMode here, since it's possible for the target 
        
             // platform to change (especially in tests). 
        
             FocusHighlightMode get highlightMode => _highlightManager.highlightMode;

We actually can work around this by setting FocusManager.instance.highlightStrategy to FocusHighlightStrategy.alwaysTraditional, see #70442 (comment). Nevertheless, this approach will may affect the entire scope of the app, potentially resulting in unforeseen behavior for other widgets.

In this PR, I propose a straightforward solution that utilizes an ancestor widget (Ink) to manage the color state corresponding to InkWell.overlayColor.

Demo the fix

Screen.Recording.2025-04-24.at.15.16.37.mov

Pre-launch Checklist

I read the Contributor Guide and followed the process outlined there for submitting PRs.
I read the Tree Hygiene wiki page, which explains my responsibilities.
I read and followed the Flutter Style Guide, including Features we expect every widget to implement.
I signed the CLA.
I listed at least one issue that this PR fixes in the description above.
I updated/added relevant documentation (doc comments with ///).
I added new tests to check the change I am making, or this PR is test-exempt.
I followed the breaking change policy and added Data Driven Fixes where supported.
All existing and new tests are passing.

If you need help, consider asking for advice on the #hackers-new channel on Discord.

packages/flutter/test/material/dropdown_test.dart

bleroux

LGTM to trigger Google tests

packages/flutter/lib/src/material/dropdown.dart

justinmc

LGTM 👍

Sorry I missed this PR for so long!

packages/flutter/test/material/dropdown_test.dart

justinmc · 2025-05-09T23:17:31Z

The Google tests did complete and there were failures, but they are all expected. Something might be wrong with the infrastructure since I don't see it turning green. @huycozy If it still says "pending" on Monday then maybe push another rebase and ping me?

Signed-off-by: huycozy <[email protected]>

…lutter/flutter#167874)

flutter/flutter@992ad74...54de32d 2025-05-12 [email protected] Update hello_world example to current layout flutter create uses (flutter/flutter#168571) 2025-05-12 [email protected] Roll Skia from cb1646ca59db to 9f9e1f37917e (1 revision) (flutter/flutter#168656) 2025-05-12 [email protected] Fix Selected DropdownMenuItem isn't highlighted on mobile (flutter/flutter#167874) 2025-05-12 [email protected] Api docs: Add Widget of the Week video to DropdownMenu (flutter/flutter#168254) 2025-05-12 [email protected] Bumping Framework Default TargetSdk to 36 (flutter/flutter#168577) 2025-05-11 [email protected] Roll Fuchsia Linux SDK from VIG5-P9wwXgQkCkeX... to 6vjKe0bfYDVaECqBL... (flutter/flutter#168646) 2025-05-11 [email protected] Roll Skia from 0feee17aeaca to cb1646ca59db (1 revision) (flutter/flutter#168642) If this roll has caused a breakage, revert this CL and stop the roller using the controls here: https://autoroll.skia.org/r/flutter-packages Please CC [email protected] on the revert to ensure that a human is aware of the problem. To file a bug in Packages: https://github.com/flutter/flutter/issues/new/choose To report a problem with the AutoRoller itself, please file a bug: https://issues.skia.org/issues/new?component=1389291&template=1850622 Documentation for the AutoRoller is here: https://skia.googlesource.com/buildbot/+doc/main/autoroll/README.md

…#9243) flutter/flutter@992ad74...54de32d 2025-05-12 [email protected] Update hello_world example to current layout flutter create uses (flutter/flutter#168571) 2025-05-12 [email protected] Roll Skia from cb1646ca59db to 9f9e1f37917e (1 revision) (flutter/flutter#168656) 2025-05-12 [email protected] Fix Selected DropdownMenuItem isn't highlighted on mobile (flutter/flutter#167874) 2025-05-12 [email protected] Api docs: Add Widget of the Week video to DropdownMenu (flutter/flutter#168254) 2025-05-12 [email protected] Bumping Framework Default TargetSdk to 36 (flutter/flutter#168577) 2025-05-11 [email protected] Roll Fuchsia Linux SDK from VIG5-P9wwXgQkCkeX... to 6vjKe0bfYDVaECqBL... (flutter/flutter#168646) 2025-05-11 [email protected] Roll Skia from 0feee17aeaca to cb1646ca59db (1 revision) (flutter/flutter#168642) If this roll has caused a breakage, revert this CL and stop the roller using the controls here: https://autoroll.skia.org/r/flutter-packages Please CC [email protected] on the revert to ensure that a human is aware of the problem. To file a bug in Packages: https://github.com/flutter/flutter/issues/new/choose To report a problem with the AutoRoller itself, please file a bug: https://issues.skia.org/issues/new?component=1389291&template=1850622 Documentation for the AutoRoller is here: https://skia.googlesource.com/buildbot/+doc/main/autoroll/README.md

…lutter/flutter#167874)

huycozy self-assigned this Apr 26, 2025

github-actions bot added framework flutter/packages/flutter repository. See also f: labels. f: material design flutter/packages/flutter/material repository. labels Apr 26, 2025

huycozy force-pushed the fix-dropdownbutton-selected-state-color-70294 branch 4 times, most recently from 37c4ec1 to b95a68a Compare April 28, 2025 11:07

huycozy marked this pull request as ready for review April 28, 2025 14:27

huycozy requested review from bleroux and justinmc April 29, 2025 07:50

bleroux reviewed Apr 29, 2025

View reviewed changes

packages/flutter/test/material/dropdown_test.dart Outdated Show resolved Hide resolved

huycozy force-pushed the fix-dropdownbutton-selected-state-color-70294 branch from b95a68a to a06e8fa Compare April 29, 2025 09:41

huycozy requested a review from bleroux May 5, 2025 02:18

bleroux approved these changes May 5, 2025

View reviewed changes

packages/flutter/lib/src/material/dropdown.dart Outdated Show resolved Hide resolved

huycozy force-pushed the fix-dropdownbutton-selected-state-color-70294 branch 2 times, most recently from 4702e1a to 3416529 Compare May 6, 2025 03:45

justinmc approved these changes May 9, 2025

View reviewed changes

packages/flutter/test/material/dropdown_test.dart Outdated Show resolved Hide resolved

packages/flutter/test/material/dropdown_test.dart Show resolved Hide resolved

fix dropdownbutton item selected state on mobile

d2c6df3

Signed-off-by: huycozy <[email protected]>

huycozy force-pushed the fix-dropdownbutton-selected-state-color-70294 branch from 3416529 to d2c6df3 Compare May 12, 2025 03:30

huycozy added the autosubmit Merge PR when tree becomes green via auto submit App label May 12, 2025

auto-submit bot added this pull request to the merge queue May 12, 2025

Merged via the queue into flutter:master with commit 1ca93de May 12, 2025
75 checks passed

flutter-dashboard bot removed the autosubmit Merge PR when tree becomes green via auto submit App label May 12, 2025

huycozy deleted the fix-dropdownbutton-selected-state-color-70294 branch May 12, 2025 10:49

engine-flutter-autoroll added a commit to engine-flutter-autoroll/packages that referenced this pull request May 12, 2025

1ca93dec9 Fix Selected DropdownMenuItem isn't highlighted on mobile (f…

a9ac780

…lutter/flutter#167874)

engine-flutter-autoroll mentioned this pull request May 12, 2025

Roll Flutter from 992ad7489c38 to 54de32d6e159 (7 revisions) flutter/packages#9243

Merged

Piinks mentioned this pull request May 16, 2025

Flutter Notable Commits - 2025 #161460

Open

huycozy mentioned this pull request Jun 12, 2025

focusColor does not work in InkWell on mobile platforms (Android, iOS) #157817

Open

engine-flutter-autoroll added a commit to engine-flutter-autoroll/packages that referenced this pull request Aug 14, 2025

1ca93dec9 Fix Selected DropdownMenuItem isn't highlighted on mobile (f…

61fc210

…lutter/flutter#167874)

engine-flutter-autoroll added a commit to engine-flutter-autoroll/packages that referenced this pull request Aug 14, 2025

1ca93dec9 Fix Selected DropdownMenuItem isn't highlighted on mobile (f…

2fd0b58

…lutter/flutter#167874)

engine-flutter-autoroll added a commit to engine-flutter-autoroll/packages that referenced this pull request Aug 15, 2025

1ca93dec9 Fix Selected DropdownMenuItem isn't highlighted on mobile (f…

2330fd2

…lutter/flutter#167874)

engine-flutter-autoroll added a commit to engine-flutter-autoroll/packages that referenced this pull request Aug 15, 2025

1ca93dec9 Fix Selected DropdownMenuItem isn't highlighted on mobile (f…

34f237f

…lutter/flutter#167874)

engine-flutter-autoroll added a commit to engine-flutter-autoroll/packages that referenced this pull request Aug 16, 2025

1ca93dec9 Fix Selected DropdownMenuItem isn't highlighted on mobile (f…

f00db54

…lutter/flutter#167874)

huycozy mentioned this pull request Oct 2, 2025

[Desktop] ListTile retains focus after selecting DropdownMenu trailing menu. #172897

Open

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

Fix Selected DropdownMenuItem isn't highlighted on mobile #167874

Fix Selected DropdownMenuItem isn't highlighted on mobile #167874

Uh oh!

huycozy commented Apr 26, 2025 •

edited

Loading

Uh oh!

Uh oh!

bleroux left a comment

Uh oh!

Uh oh!

justinmc left a comment

Uh oh!

Uh oh!

Uh oh!

justinmc commented May 9, 2025

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

	final bool inTraditionalMode = switch (FocusManager.instance.highlightMode) {
	FocusHighlightMode.touch => false,
	FocusHighlightMode.traditional => true,
	};

	static FocusHighlightMode get _defaultModeForPlatform {
	// Assume that if we're on one of the mobile platforms, and there's no mouse
	// connected, that the initial interaction will be touch-based, and that
	// it's traditional mouse and keyboard on all other platforms.
	//
	// This only affects the initial value: the ongoing value is updated to a
	// known correct value as soon as any pointer/keyboard events are received.
	switch (defaultTargetPlatform) {
	case TargetPlatform.android:
	case TargetPlatform.fuchsia:
	case TargetPlatform.iOS:
	if (WidgetsBinding.instance.mouseTracker.mouseIsConnected) {
	return FocusHighlightMode.traditional;
	}
	return FocusHighlightMode.touch;
	case TargetPlatform.linux:
	case TargetPlatform.macOS:
	case TargetPlatform.windows:
	return FocusHighlightMode.traditional;

	/// If [highlightMode] returns [FocusHighlightMode.touch], then widgets should
	/// not draw their focus highlight unless they perform text entry.
	///
	/// If [highlightMode] returns [FocusHighlightMode.traditional], then widgets should
	/// draw their focus highlight whenever they are focused.
	// Don't want to set _highlightMode here, since it's possible for the target
	// platform to change (especially in tests).
	FocusHighlightMode get highlightMode => _highlightManager.highlightMode;

Fix Selected DropdownMenuItem isn't highlighted on mobile #167874

Fix Selected DropdownMenuItem isn't highlighted on mobile #167874

Uh oh!

Conversation

huycozy commented Apr 26, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Description

Demo the fix

Pre-launch Checklist

Uh oh!

Uh oh!

bleroux left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

justinmc left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

justinmc commented May 9, 2025

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

huycozy commented Apr 26, 2025 •

edited

Loading