development/flutter
development/flutter
1
0
Fork 0
mirror of https://github.com/flutter/flutter synced 2024-08-28 04:21:14 +00:00
Code Issues Packages Projects Releases Wiki Activity
37104 commits 766 branches 969 tags 1.3 GiB
Dart 98.8%
C++ 0.2%
Objective-C 0.2%
CMake 0.2%
Java 0.1%
Other 0.1%
Find a file
tauu 3b19c2e5d8
[web] fix: do not call onSubmitted of TextField when switching browser tabs on mobile web (#134870) 
This PR fixes #134846. As discussed in the issue, the onSubmitted callback of a TextField is called when the browser switches tabs or is sent to the background if the flutter app is running in any mobile browser (desktop browsers are not affected). Furthermore there is no straight forward way to distinguish between onSubmitted being called because the user pressed the enter key and it being called because the user switched tabs. For example in a chat app this would cause a message to be sent when the user submits the text by pressing "send" on the virtual keyboard as well as when the user switches to another tab. The later action is likely not so much intended.

The next section explains what causes the bug and explains the proposed fix.

## Bug Analysis
The root cause for this behaviour is line 3494 in editable_text.dart: 0b540a87f1/packages/flutter/lib/src/widgets/editable_text.dart (L3487-L3499)
Only if the app is running on the web `_finalizeEditing` is called and this will then trigger the onSubmitted callback. If flutter is running on the web, there are only exactly 3 cases, in which the function is called. The following call trace analysis will describe why.
  - `connectionClosed()` is only called by in one location, `_handleTextInputInvocation` of the TextInput service.
367203b301/packages/flutter/lib/src/services/text_input.dart (L1896C12-L1899)
  - In particular it is only called if the TextInput service receives a 'TextInputClient.onConnectionClosed' message from the engine.
  - The only location where the web part of the engine send this message is the `onConnectionClosed` function of the TextEditingChannel.
cbda68a720/lib/web_ui/lib/src/engine/text_editing/text_editing.dart (L2242-L2254)
  - `onConnectionClosed` in turn is only called by the `sendTextConnectionClosedToFrameworkIfAny` function of `HybridTextEditing`.
cbda68a720/lib/web_ui/lib/src/engine/text_editing/text_editing.dart (L2340-L2345)

The function `sendTextConnectionClosedToFrameworkIfAny` is only called at 3 distinct locations of the web engine.

### 1. IOSTextEditingStrategy 
As described in the comment `sendTextConnectionClosedToFrameworkIfAny` is called if the browser is sent to the background or the tab is changed.
cbda68a720/lib/web_ui/lib/src/engine/text_editing/text_editing.dart (L1632-L1656)

### 2. AndroidTextEditingStrategy
Same situation as for iOS. `sendTextConnectionClosedToFrameworkIfAny` is also called if `windowHasFocus` is false, which is the case if the browser is sent to background or the tab is changed.
cbda68a720/lib/web_ui/lib/src/engine/text_editing/text_editing.dart (L1773-L1785)

### 3. TextInputFinishAutofillContext
This call seems to always happen when `finishAutofillContext` is triggered by the framework.
cbda68a720/lib/web_ui/lib/src/engine/text_editing/text_editing.dart (L2075-L2083)

## Proposed Fix
The fixed proposed and implemented by this PR is to simply delete the call to`_finalizeEditing` in the `connectionClosed` function of editable_text.dart.
0b540a87f1/packages/flutter/lib/src/widgets/editable_text.dart (L3487-L3499)

The reasoning for this being:
   * `_finalizeEditing` is only called in `connectionClosed` for the web engine.
   * As explained by the trace analysis above, the web engine only triggers this `_finalizeEditing` call in 3 cases.
   * In the 2 cases for IOSTextEditingStrategy and AndroidTextEditingStrategy the web engine triggering the call only causes the undesired behaviour reported in the issue.
   * In the third case for TextInputFinishAutofillContext, I can't see a good reason why this would require calling `_finalizeEditing` as it only instructs the platform to save the current values. Other platforms also don't have anything that would trigger onSubmitted being called, so it seems safe to remove it.
   * For other platforms the onConnectionClosed function was recently incorporated to only unfocus the TextField. So removing the call `_finalizeEditing` unifies the platform behaviour. See also
     https://github.com/flutter/flutter/pull/123929
     https://github.com/flutter/engine/pull/41500

*List which issues are fixed by this PR. You must list at least one issue.*
#134846

To simplify the evaluation, here are two versions of the minimal example given in the issue, build with the current master and with this PR applied:
current master: https://tauu.github.io/flutter-onsubmit-test/build/web-master/
current master + PR applied: https://tauu.github.io/flutter-onsubmit-test/build/web/
2023-09-28 16:43:04 +00:00
.github Migrate the "Missing frames / speed related performance issues" issue template to use Github forms (#134033) 2023-09-18 16:40:07 +00:00
.vscode Adjust repo config for VS Code formatting (#122758) 2023-04-14 12:35:42 +02:00
bin Roll Packages from 21c2ebb39c07 to c070b0a7a80a (3 revisions) (#135676) 2023-09-28 16:18:38 +00:00
dev Revert "Upload generated frame-request-pending stats" (#135672) 2023-09-28 07:23:25 -07:00
examples Implement SelectionArea single click/tap gestures (#132682) 2023-09-28 01:42:16 +00:00
packages [web] fix: do not call onSubmitted of TextField when switching browser tabs on mobile web (#134870) 2023-09-28 16:43:04 +00:00
.ci.yaml Config changes for linux coverage. (#135604) 2023-09-27 16:42:54 +00:00
.gitattributes Add pre-stable support for create on Windows (#51895) 2020-03-23 10:42:26 -07:00
.gitignore add .pub-cache back to .gitignore (#128894) 2023-06-15 19:21:05 +00:00
analysis_options.yaml Enable strict-inference (#135043) 2023-09-20 19:59:08 +00:00
AUTHORS Add Sabin Neupane to AUTHORS (#131237) 2023-07-25 22:49:45 +00:00
CODE_OF_CONDUCT.md Update list of CoC contacts. (#130630) 2023-07-16 23:39:20 +00:00
CODEOWNERS Remove self from CODEOWNERS (#125337) 2023-04-21 22:33:05 +00:00
CONTRIBUTING.md update link to good first issues (#130759) 2023-07-17 23:51:14 +00:00
dartdoc_options.yaml Eliminate uses of pub executable in docs publishing and sample analysis. (#89181) 2021-08-30 12:16:05 -07:00
flutter_console.bat License update (#45373) 2019-11-27 15:04:02 -08:00
LICENSE License update (#45373) 2019-11-27 15:04:02 -08:00
PATENT_GRANT Rename patent file (#38686) 2019-08-16 16:54:58 +01:00
README.md Applied the logo to the Discord badge. (#134339) 2023-09-15 04:39:30 +00:00
TESTOWNERS Added a devicelab test for vulkan validation layers (#134685) 2023-09-14 09:13:35 -07:00

README.md

Flutter

Build Status - Cirrus Discord badge Twitter handle codecov CII Best Practices OpenSSF Scorecard SLSA 1

Flutter is Google's SDK for crafting beautiful, fast user experiences for mobile, web, and desktop from a single codebase. Flutter works with existing code, is used by developers and organizations around the world, and is free and open source.

Documentation

For announcements about new releases, follow the flutter-announce@googlegroups.com mailing list. Our documentation also tracks breaking changes across releases.

Terms of service

The Flutter tool may occasionally download resources from Google servers. By downloading or using the Flutter SDK, you agree to the Google Terms of Service: https://policies.google.com/terms

For example, when installed from GitHub (as opposed to from a prepackaged archive), the Flutter tool will download the Dart SDK from Google servers immediately when first run, as it is used to execute the flutter tool itself. This will also occur when Flutter is upgraded (e.g. by running the flutter upgrade command).

About Flutter

We think Flutter will help you create beautiful, fast apps, with a productive, extensible and open development model, whether you're targeting iOS or Android, web, Windows, macOS, Linux or embedding it as the UI toolkit for a platform of your choice.

Beautiful user experiences

We want to enable designers to deliver their full creative vision without being forced to water it down due to limitations of the underlying framework. Flutter's layered architecture gives you control over every pixel on the screen and its powerful compositing capabilities let you overlay and animate graphics, video, text, and controls without limitation. Flutter includes a full set of widgets that deliver pixel-perfect experiences whether you're building for iOS (Cupertino) or other platforms (Material), along with support for customizing or creating entirely new visual components.

Reflectly hero image

Fast results

Flutter is fast. It's powered by the same hardware-accelerated 2D graphics library that underpins Chrome and Android: Skia. We architected Flutter to support glitch-free, jank-free graphics at the native speed of your device. Flutter code is powered by the world-class Dart platform, which enables compilation to 32-bit and 64-bit ARM machine code for iOS and Android, as well as JavaScript for the web and Intel x64 for desktop devices.

Dart diagram

Productive development

Flutter offers stateful hot reload, allowing you to make changes to your code and see the results instantly without restarting your app or losing its state.

Hot reload animation

Extensible and open model

Flutter works with any development tool (or none at all), and also includes editor plug-ins for both Visual Studio Code and IntelliJ / Android Studio. Flutter provides tens of thousands of packages to speed your development, regardless of your target platform. And accessing other native code is easy, with support for both FFI (on Android, on iOS, on macOS, and on Windows) as well as platform-specific APIs.

Flutter is a fully open-source project, and we welcome contributions. Information on how to get started can be found in our contributor guide.