flutter
Toggling enabled of Textfield notifies FocusNode listeners
Is there an existing issue for this?
- [X] I have searched the existing issues
- [X] I have read the guide to filing a bug
Steps to reproduce
- Attach a FocusNode to an input inside a Stateful Widget and listen to it
- Toggle/Rebuild the input with a different
enabledstate - Listeners are notified, although the focus did not change
Expected results
I would not expect the listeners to be notified when the input state changed between disabled and enabled without any change in focus.
Actual results
Listeners of the FocusNode are notified although the focus did not change.
Code sample
https://dartpad.dev/?id=112cc5c8b9cf28fac38b4b37656aede5
Code
import 'package:flutter/material.dart';
const Color darkBlue = Color.fromARGB(255, 18, 32, 47);
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
theme: ThemeData.dark().copyWith(
scaffoldBackgroundColor: darkBlue,
),
debugShowCheckedModeBanner: false,
home: Scaffold(
body: Center(
child: Container(child: MyWidget(), width: 300, height: 200)
),
),
);
}
}
class MyWidget extends StatefulWidget {
@override
MyWidgetState createState() => MyWidgetState();
}
class MyWidgetState extends State<MyWidget> {
late final FocusNode markFocusNode;
bool isLocked = false;
@override
void initState() {
markFocusNode = FocusNode(debugLabel: "MarkFocusNode")
..addListener(_onChangeFocus);
super.initState();
}
@override
void dispose() {
markFocusNode.dispose();
super.dispose();
}
@override
Widget build(BuildContext context) {
return Column(
children: [
TextField(
autofocus: false,
enabled: !isLocked,
focusNode: markFocusNode,
onChanged: (val) => print('onChanged'),
textInputAction: TextInputAction.next,
),
ElevatedButton(child: Text('Toggle Lock'), onPressed: () => setState(() => isLocked = !isLocked))
]
);
}
void _onChangeFocus() {
if (!markFocusNode.hasFocus) {
print('Lost focus');
}
}
}
Logs
No response
Flutter Doctor output
Doctor output
[√] Flutter (Channel stable, 3.7.8, on Microsoft Windows [Version 10.0.19044.2846], locale de-DE)
• Flutter version 3.7.8 on channel stable at C:\SDKs\flutter
• Upstream repository https://github.com/flutter/flutter.git
• Framework revision 90c64ed42b (6 weeks ago), 2023-03-21 11:27:08 -0500
• Engine revision 9aa7816315
• Dart version 2.19.5
• DevTools version 2.20.1
Thanks for the detailed report @KammererTob Upon running your code sample using latest stable (3.7.12), I observed below:
-
Tap on textfield to make it active. We see -
D/InputConnectionAdaptor(26306): The input method toggled cursor monitoring onlog. -
Tap on
Toggle lock. We see ->Lost focus. -
Tap again on
Toggle lock. We see ->Lost focus, but the textfield is now active.
Is this the behavior you are reporting that even though it says lost focus, but textfield is active ? But expected behavior should be, the textfield shouldn't be active ?
@darshankawar Thanks for the quick response.
No. If you don't tap on the textfield at all and only press the "Toggle lock" (so toggling between enabled and disabled) button it always calls the _onChangeFocus method (the listener of the attached FocusNode), although technically the Focus state of the input hasn't changed. We only switched between endabled and disabled states.
EDIT: I updated the issue to better reflect that the issue is not actually with rebuilding the widget, but specifically with toggling the enabled flag of the TextField
Thanks for the update and feedback. Upon directly tapping Toggle lock, I don't see onChanged being triggered or printed. I see Lost focus in the log as below:
I/flutter (28083): Lost focus
I/flutter (28083): Lost focus
I/flutter (28083): Lost focus
I/flutter (28083): Lost focus
I/flutter (28083): Lost focus
I/flutter (28083): Lost focus
I/flutter (28083): Lost focus
I am on latest stable (3.7.12).
"Lost focus" is the output of the _onChangeFocus method, which is the listener method attached to the focus node:
markFocusNode = FocusNode(debugLabel: "MarkFocusNode")
..addListener(_onChangeFocus);
void _onChangeFocus() {
if (!markFocusNode.hasFocus) {
print('Lost focus');
}
}
I see, thanks.
stable, master flutter doctor -v
[!] Flutter (Channel stable, 3.7.12, on macOS 12.2.1 21D62 darwin-x64, locale
en-GB)
• Flutter version 3.7.12 on channel stable at
/Users/dhs/documents/fluttersdk/flutter
! Warning: `flutter` on your path resolves to
/Users/dhs/Documents/Fluttersdk/flutter/bin/flutter, which is not inside
your current Flutter SDK checkout at
/Users/dhs/documents/fluttersdk/flutter. Consider adding
/Users/dhs/documents/fluttersdk/flutter/bin to the front of your path.
! Warning: `dart` on your path resolves to
/Users/dhs/Documents/Fluttersdk/flutter/bin/dart, which is not inside your
current Flutter SDK checkout at /Users/dhs/documents/fluttersdk/flutter.
Consider adding /Users/dhs/documents/fluttersdk/flutter/bin to the front
of your path.
• Upstream repository https://github.com/flutter/flutter.git
• Framework revision 4d9e56e694 (3 days ago), 2023-04-17 21:47:46 -0400
• Engine revision 1a65d409c7
• Dart version 2.19.6
• DevTools version 2.20.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.
[!] Xcode - develop for iOS and macOS (Xcode 12.3)
• Xcode at /Applications/Xcode.app/Contents/Developer
! Flutter recommends a minimum Xcode version of 13.
Download the latest version or update via the Mac App Store.
• CocoaPods version 1.11.2
[✓] Chrome - develop for the web
• Chrome at /Applications/Google Chrome.app/Contents/MacOS/Google Chrome
[✓] VS Code (version 1.62.0)
• VS Code at /Applications/Visual Studio Code.app/Contents
• Flutter extension version 3.21.0
[✓] Connected device (5 available)
• SM G975F (mobile) • RZ8M802WY0X • android-arm64 • Android 11 (API 30)
• Darshan's iphone (mobile) • 21150b119064aecc249dfcfe05e259197461ce23 •
ios • iOS 14.4.1 18D61
• 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 98.0.4758.80
[✓] HTTP Host Availability
• All required HTTP hosts are available
! Doctor found issues in 1 category.
[!] Flutter (Channel master, 3.11.0-1.0.pre.63, on macOS 12.2.1 21D62
darwin-x64, locale en-GB)
• Flutter version 3.11.0-1.0.pre.63 on channel master at
/Users/dhs/documents/fluttersdk/flutter
! Warning: `flutter` on your path resolves to
/Users/dhs/Documents/Fluttersdk/flutter/bin/flutter, which is not inside
your current Flutter SDK checkout at
/Users/dhs/documents/fluttersdk/flutter. Consider adding
/Users/dhs/documents/fluttersdk/flutter/bin to the front of your path.
! Warning: `dart` on your path resolves to
/Users/dhs/Documents/Fluttersdk/flutter/bin/dart, which is not inside your
current Flutter SDK checkout at /Users/dhs/documents/fluttersdk/flutter.
Consider adding /Users/dhs/documents/fluttersdk/flutter/bin to the front
of your path.
• Upstream repository https://github.com/flutter/flutter.git
• Framework revision 04e284a49d (27 minutes ago), 2023-05-05 00:31:05 -0400
• Engine revision c97a0deccb
• Dart version 3.1.0 (build 3.1.0-77.0.dev)
• DevTools version 2.23.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 30.0.3)
• Android SDK at /Users/dhs/Library/Android/sdk
✗ cmdline-tools component is missing
Run `path/to/sdkmanager --install "cmdline-tools;latest"`
See https://developer.android.com/studio/command-line for more details.
✗ Android license status unknown.
Run `flutter doctor --android-licenses` to accept the SDK licenses.
See https://flutter.dev/docs/get-started/install/macos#android-setup for
more details.
[✓] Xcode - develop for iOS and macOS (Xcode 13.2.1)
• Xcode at /Applications/Xcode.app/Contents/Developer
• Build 13C100
• CocoaPods version 1.11.2
[✓] Chrome - develop for the web
• Chrome at /Applications/Google Chrome.app/Contents/MacOS/Google Chrome
[✓] IntelliJ IDEA Ultimate Edition (version 2021.3.2)
• IntelliJ at /Applications/IntelliJ IDEA.app
• Flutter plugin version 65.1.4
• Dart plugin version 213.7228
[✓] VS Code (version 1.62.0)
• VS Code at /Applications/Visual Studio Code.app/Contents
• Flutter extension version 3.29.0
[✓] Connected device (3 available)
• Darshan's iphone (mobile) • 21150b119064aecc249dfcfe05e259197461ce23 • ios
• iOS 15.3.1 19D52
• macOS (desktop) • macos •
darwin-x64 • macOS 12.2.1 21D62 darwin-x64
• Chrome (web) • chrome •
web-javascript • Google Chrome 109.0.5414.119
[✓] Network resources
• All expected network resources are available.
! Doctor found issues in 1 category.
[!] Xcode - develop for iOS and macOS (Xcode 12.3)
• Xcode at /Applications/Xcode.app/Contents/Developer
! Flutter recommends a minimum Xcode version of 13.
Download the latest version or update via the Mac App Store.
• CocoaPods version 1.11.2
[✓] Chrome - develop for the web
• Chrome at /Applications/Google Chrome.app/Contents/MacOS/Google Chrome
[✓] VS Code (version 1.62.0)
• VS Code at /Applications/Visual Studio Code.app/Contents
• Flutter extension version 3.21.0
[✓] Connected device (5 available)
• SM G975F (mobile) • RZ8M802WY0X • android-arm64 • Android 11 (API 30)
• Darshan's iphone (mobile) • 21150b119064aecc249dfcfe05e259197461ce23 •
ios • iOS 14.4.1 18D61
• 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 98.0.4758.80
[✓] HTTP Host Availability
• All required HTTP hosts are available
! Doctor found issues in 1 category.
@KammererTob I was looking into this issue. The behavior of focus being lost when the FocusNode becomes disabled seems intuitive to me. What is the point of having focus if the Node itself can no longer be edited?
@dleyba042 The issue is not with focus being lost when the FocusNode becomes disabled, it is more with the listener always being called when the state of input is being changed between enabled and disabled, regardless if it had any focus to begin with.
FocusNodes are ChangeNotifiers that notifiy their listeners on several possible changes not only when they gain or lose focus.
In the given code sample, each time TextField.enabled is changed, the focus node canRequestFocus property is updated and listeners will be notified.
@bleroux Ah right. That makes sense. Is it documented somewhere what changes actually notify the listeners? I only found this sentence which doesn't make this behaviour really clear (to me at least).
FocusNodes are ChangeNotifiers, so a listener can be registered to receive a notification when the focus changes
https://api.flutter.dev/flutter/widgets/FocusNode-class.html
@KammererTob Thanks for pointing out this sentence, you are right that it can be improved. I filed https://github.com/flutter/flutter/pull/126331 to add some details.
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.
![github-actions[bot] avatar](https://avatars.githubusercontent.com/in/15368?v=4 "Published by a pub.dev verified publisher"){kind=small}