Skip to content

[web] TextFormField does not get blurred when tapped outside of the widget. #64245

@Sulav-Beehave

Description

@Sulav-Beehave

Steps to Reproduce

  1. Click on the TextFormField.
  2. 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)"),
                                      ],
                                    ),
                                  ),
                                ],
                              ),
                            ),
                          );
                        }
                      }

`

Metadata

Metadata

Assignees

No one assigned

    Labels

    P3Issues that are less important to the Flutter projecta: text inputEntering text in a text field or keyboard related problemsc: regressionIt was better in the past than it is nowf: focusFocus traversal, gaining or losing focusf: material designflutter/packages/flutter/material repository.found in release: 1.22Found to occur in 1.22frameworkflutter/packages/flutter repository. See also f: labels.has reproducible stepsThe issue has been confirmed reproducible and is ready to work onplatform-webWeb applications specificallyr: fixedIssue is closed as already fixed in a newer version

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions