Repository navigation
With EnsureSemantics on, Buttons Maintain Focus State on Press #158527
Description
Steps to reproduce
On flutter beta version 3.27.0-0.1.pre
- Turn on semantics auto rendering for application
- Have an app with a button that doesn't result in navigation
- Launch on web
- Press button
Expected results
Focus state and visual should only be showing on keyboard navigation (i.e. tab)
Actual results
If you press a button/interactive component (that doesn't navigate), after release, the button will both have focus and show focus visual. If autorendering of semantics is disabled, then this issue doesn't happen.
Code sample
With favorites sample
Code sample
Widget build(BuildContext context) {
SemanticsBinding.instance.ensureSemantics();
return ChangeNotifierProvider<Favorites>(
create: (context) => Favorites(),
child: MaterialApp.router(
title: 'Testing Sample',
theme: ThemeData(
colorSchemeSeed: Colors.blue,
visualDensity: VisualDensity.adaptivePlatformDensity,
),
routerConfig: router(),
),
);
}Screenshots or Video
Screenshots / Video demonstration
Screen.Recording.2024-11-12.at.12.21.49.PM.mov
Logs
No response
Flutter Doctor output
Doctor output
Flutter 3.27.0-0.1.pre • channel beta •
https://emma-roudabush-disney:[email protected]
/flutter/flutter.git
Framework • revision 2e2c358c9b (3 weeks ago) • 2024-10-22 11:02:13 -0400
Engine • revision af0f0d559c
Tools • Dart 3.6.0 (build 3.6.0-334.3.beta) • DevTools 2.40.1
emmaroudabush@V17CNW73XQ sandbox % flutter doctor -v
[!] Flutter (Channel beta, 3.27.0-0.1.pre, on macOS 14.5 23F79 darwin-arm64,
locale en-US)
• Flutter version 3.27.0-0.1.pre on channel beta at
/Users/emmaroudabush/Source/flutter
! Upstream repository
https://emma-roudabush-disney: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@gith
ub.com/flutter/flutter.git is not a standard remote.
Set environment variable "FLUTTER_GIT_URL" to
https://emma-roudabush-disney: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@gith
ub.com/flutter/flutter.git to dismiss this error.
• Framework revision 2e2c358c9b (3 weeks ago), 2024-10-22 11:02:13 -0400
• Engine revision af0f0d559c
• Dart version 3.6.0 (build 3.6.0-334.3.beta)
• DevTools version 2.40.1
• If those were intentional, you can disregard the above warnings; however it
is recommended to use "git" directly to perform update checks and upgrades.
[✓] Android toolchain - develop for Android devices (Android SDK version
32.1.0-rc1)
• Android SDK at /Users/emmaroudabush/Library/Android/sdk
• Platform android-34, build-tools 32.1.0-rc1
• Java binary at: /Applications/Android
Studio.app/Contents/jbr/Contents/Home/bin/java
• Java version OpenJDK Runtime Environment (build
17.0.10+0-17.0.10b1087.21-11572160)
• All Android licenses accepted.
[✓] Xcode - develop for iOS and macOS (Xcode 15.4)
• Xcode at /Users/emmaroudabush/Downloads/Xcode.app/Contents/Developer
• Build 15F31d
• CocoaPods version 1.15.2
[✓] Chrome - develop for the web
• Chrome at /Applications/Google Chrome.app/Contents/MacOS/Google Chrome
[✓] Android Studio (version 2023.3)
• Android Studio at /Applications/Android Studio.app/Contents
• Flutter plugin can be installed from:
🔨 https://plugins.jetbrains.com/plugin/9212-flutter
• Dart plugin can be installed from:
🔨 https://plugins.jetbrains.com/plugin/6351-dart
• Java version OpenJDK Runtime Environment (build
17.0.10+0-17.0.10b1087.21-11572160)
[✓] VS Code (version 1.95.1)
• VS Code at /Applications/Visual Studio Code.app/Contents
• Flutter extension version 3.100.0Metadata
Metadata
Assignees
Labels
High-priority issues at the top of the work listIt was better in the past than it is nowFound to occur in 3.27flutter/packages/flutter repository. See also f: labels.The issue has been confirmed reproducible and is ready to work onWeb applications specificallyIssue is closed as already fixed in a newer versionOwned by Web platform teamTriaged by Web platform team
Activity
darshankawar commentedon Nov 13, 2024
Thanks for the report. I was able to replicate this only on web platform using latest beta and master versions. The reported behavior doesn't occur on latest stable and on other platforms.
Code sample : https://github.com/flutter/codelabs/tree/main/testing_codelab/step_04 and adding
SemanticsBinding.instance.ensureSemantics();as mentioned in original description.yjbanov commentedon Dec 17, 2024
I can reproduce the behavior. However, I think the bug is the exact opposite of what we think. The behavior of moving the keyboard focus to the clicked widget is the idiomatic web behavior. This is enabled by
SemanticsBinding.instance.ensureSemantics()because the focus is linked to the HTML DOM, allowing the browser to dictate where the focus goes. The bug is in the framework in the case when semantics is disabled. On the web the framework should move the focus on click, but currently it doesn't.The other behavior, that I'm observing both with semantics enabled and disabled, is when you click outside the focused widget onto something that's not focusable. The idiomatic behavior on the web is that the widget should be blurred. This should be fixed in the framework too.
13 remaining items
kevmoo commentedon Jan 29, 2025
Bumping to P0. This is a regression. CC @zanderso
yjbanov commentedon Jan 29, 2025
P0 means the world is on fire. This is P1.
kevmoo commentedon Feb 4, 2025
The PR fixing this is now unblocked!
Adjustments to FocusHighlightMode handling (#162417)
github-actions commentedon Feb 21, 2025
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.Adjustments to FocusHighlightMode handling (#162417)