Repository navigation
[web] TextFormField does not get blurred when tapped outside of the widget. #64245
Description
Steps to Reproduce
- Click on the TextFormField.
- Now click on any other area of screen.
Expected results:
Expected behaviour is textfield must lose focus.
Actual results:
The focus is still on Textformfield
Note:
This functionality previously worked upto version 1.19.0-4.3.pre (BETA channel)
Demo Code:
main.dart
`
import 'package:flutter/material.dart';
import 'dart:html' as html;
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'TextField Issue',
theme: ThemeData(
primarySwatch: Colors.purple,
),
home: MyHomePage(title: 'TextField Issue'),
);
}
}
class MyHomePage extends StatefulWidget {
MyHomePage({Key key, this.title}) : super(key: key);
final String title;
@override
_MyHomePageState createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
FocusNode _focusNode;
@override
void initState() {
_focusNode = FocusNode(
canRequestFocus: true,
);
_focusNode.addListener(() => print("FocusNode changed"));
super.initState();
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text(widget.title),
),
body: Center(
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Container(
padding: EdgeInsets.all(24),
child: TextFormField(
focusNode: _focusNode,
),
),
Container(
padding: EdgeInsets.all(24),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text("Demo displaying blur issue on web"),
Text("\n1) Click on the top-most TextFormField above"),
Text("2) Now click on any other area of screen. Basic expected behaviour is textfield must lose focus but it doesnt lose focus."),
Wrap(
children: [
Text("3) The blur was removed in recent PR "),
InkWell(
child: Text('https://github.com/flutter/engine/pull/18743'),
onTap: () {
html.window.open('https://github.com/flutter/engine/pull/18743', '_blank');
},
)
],
),
Text("4) This functionality previously worked upto version 1.19.0-4.3.pre (BETA channel)"),
],
),
),
],
),
),
);
}
}
`
Activity
hamdikahloun commentedon Aug 20, 2020
hi @Sulav-Beehave
Container( padding: EdgeInsets.all(24), child: Column( children: [ TextFormField( focusNode: _focusNode, ), TextFormField(), ], ))it's because nothing else Focusable. If you add other TextFormField you will see right behavior.
Sulav-Beehave commentedon Aug 21, 2020
Hi @hamdikahloun.
Thanks for replying.
Actually it was working up to version 1.19.0-4.3.pre (BETA channel). The main issue that it causes is:
When Textfield is focused the keyboard appears and the keyboard should go away when we tap outside but since the focus is still on Textfield there is no way to dismiss the keyboard other than pressing back. We do have an option in keyboard but it is still an issue when we have multi-line keyboard input type. Also the issue with multi-line causes issue in web since when we press enter the cursor is sent to next line rather than losing focus.
Also if we have a dropdown in same screen and when we click the dropdown in this screen the natural behavior is to unfocus the widget but the focus still stays there when we select a item from dropdown.
Only solution that i found for it currently is https://flutterigniter.com/dismiss-keyboard-form-lose-focus/ but i don't think this technique works when there are multiple nested stateful widgets.
Is there any way to fix this behaviour because it was working in previous versions? I haven't been able to update to latest beta version due to this issue.
Also it wasn't working in mobile devices but it did work on web browsers but they have removed the functionality in this pr flutter-team-archive/engine#18743
HansMuller commentedon Aug 24, 2020
CC @gspencergoog
gspencergoog commentedon Aug 24, 2020
cc @nturgut is this an expected side effect of flutter-team-archive/engine#18743?
nturgut commentedon Aug 24, 2020
Yes, for web, this is an expected side effect. It is requested in other issues (which are noted on the PR). The PR only changes web behavior though. For web, mobile vs desktop browsers have different behaviour. PR only changes desktop browsers (to the behavior which is also adopted by the desktop flutter apps).
I don't know the current use case but if the use case is filling out a form and pressing next (as the example gif), we also have another alternative:
When the button is pressed you can call finishAutofillContext with
shouldSave=falseThis behaviour is meant to use with Autofill, since context is finished, text connection will be closed by the engine.
Sulav-Beehave commentedon Aug 27, 2020
Hi @nturgut
Thanks for replying. The normal behaviour that user expects in a web page is to lose focus from input field when clicked outside. It works in every html page as shown in gif below.
But it doesnt work as expected as in flutter web currently as shown in gif below.
I understand that the PR flutter-team-archive/engine#18743 was done to address the issues reported in its description, which consists in avoiding to trigger onFieldSubmitted when the text field looses focus, the purpose being to trigger onFieldSubmitted only when the users press the enter or tab keys.
However this PR has introduced the current issue with focus.
The solution could be to re-introduce the previous behavior which is the natural one for a web page, still avoiding to call onFieldSubmitted when the focus is lost. Only onEditingComplete should be called when the focus is lost.
Fabrice-TEICHTEIL-KOENIGSBUCH commentedon Aug 27, 2020
Looking at PRs mentioned in flutter-team-archive/engine#18743 the main point seems to be whether flutter for web should behave like a web page or if it should behave the same way across all platforms.
According to the below comment it seems that the later choice has been made: #58207 (comment)
Even though this choice makes a lot of sense as it would be a burden for the developer to test the different behaviour across all platforms, it introduces a major regression for applications that were relying on the previous way of working, and there is no simple way as I see to revert to the previous behaviour programatically.
The simplest and quickest solution imho would be to keep the current behaviour as default, and to add an optional parameter to TextField and TextFormField constructors to let the developer decide if the input field shall be blurred when the user clicks on an area other than the input field itself.
pedromassangocode commentedon Sep 8, 2020
Still valid with on the latest
masterchannel.flutter doctor -v
3 remaining items
[-]TextFormField does not get blurred when tapped outside of the widget.[/-][+][web] TextFormField does not get blurred when tapped outside of the widget.[/+]mariamhas commentedon Sep 16, 2020
We should keep the callback functionality to match Flutter framework, but perhaps provide a configuration that can allow developers to make TextformFields act "webby". marking as P5 as new feature
Fabrice-TEICHTEIL-KOENIGSBUCH commentedon Sep 17, 2020
@mariamhas @yjbanov we have a flutter web app in production which is currently stuck with beta version 1.19 since the framework behaviour changed for text field focus. For us, this issue is not a P5 nice to have new feature, but is critical so that we can release the app with latest flutter versions.
Basically we have a requirement to send user input to the backend each time the user finishes editing a field in a form, a bit like google sheet that sync with backend after each user action. We cannot wait that the user presses a submit button after filling all fields.
With the current framework version, when the user finishes editing a text field and then goes to the next one which is a drop down, we don't get notified that text field edition is completed when the drop down is pressed and therefore cannot send text field value to the backend.
If you're not going to release the configuration solution anytime soon, would you have any recommendation to us to implement the above feature with current framework version?
Many thanks :)
pedromassangocode commentedon Nov 12, 2020
Related issues (close ones):
#58207
#67646
Maybe a duplicate of #32433
TextFormField does not get blurred when tapped outside of the widget.
darshankawar commentedon Jun 30, 2023
Verified this issue using latest master and stable versions and ran on web, confirmed that tapping outside the textfield loses the focus as expected:
64245.mov
runnable code sample
Closing this as fixed and working as expected.
github-actions commentedon Jul 14, 2023
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.