After inputting text into a textFormField tapping into a second TextFormField does not trigger onTapOutside #127597

Strain-solutions · 2023-05-25T16:46:32Z

Is there an existing issue for this?

I have searched the existing issues
I have read the guide to filing a bug

Steps to reproduce

Using flutter web I have a listview with each item in the listview contains a textFormField. I use the onTapOutside to save the text that has been inputed to a repo. This works fine if the user taps the back button or most other places on the screen. However, if they tap into another textFormField then the onTapOutside does not trigger and the text is not stored. This is on web so using 'done' on the keyboard is not an option like it is on mobile.

Expected results

Tapping into another textformfield should trigger the onTapOutside callback (and save the text to the repo)

Actual results

Tapping into another textformfield does not trigger the onTapOutside callback (and text is not stored)

Code sample

import 'package:flutter/material.dart';


class TestTextController extends StatefulWidget {
  const TestTextController({Key? key}) : super(key: key);

  @override
  State<TestTextController> createState() => _TestTextControllerState();
}

class _TestTextControllerState extends State<TestTextController> {
  TextEditingController tx1 = TextEditingController();
  TextEditingController tx2 = TextEditingController();



  @override
  Widget build(BuildContext context) {
    return  Scaffold(
      appBar: AppBar(title: Text('Test'),),
      body: SizedBox(
       width: 200,
        child: Column(
          children: [
            TextFormField(
              controller: tx1,
              decoration: InputDecoration(
                  focusColor: Colors.grey,
                  focusedBorder: OutlineInputBorder(
                      borderRadius: BorderRadius.all(Radius.circular(5.0)),
                      borderSide: BorderSide(color: Colors.blue)),
                  isCollapsed: false,
              ),
              // initialValue: "",
              onChanged: (text)=>print(text),
              onTapOutside: (event)=>print('tapped outside'),
              maxLines: null,
            ),
            TextFormField(
              controller: tx2,
              decoration: InputDecoration(
                  focusColor: Colors.grey,
                  focusedBorder: OutlineInputBorder(
                      borderRadius: BorderRadius.all(Radius.circular(5.0)),
                      borderSide: BorderSide(color: Colors.blue)),
                  isCollapsed: false,
              ),
              // initialValue: "",
              onChanged: (text)=>print(text),
              onTapOutside: (event)=>print('tapped outside'),
              maxLines: null,
            ),
          ],
        ),
      ),
    );
  }
}

Screenshots or Video

Screenshots / Video demonstration

[Upload media here]

Logs

[Paste your logs here]

Flutter Doctor output

Doctor output

Doctor summary (to see all details, run flutter doctor -v):
[✓] Flutter (Channel master, 3.11.0-6.0.pre.18, on macOS 12.6.4 21G526 darwin-arm64, locale en-GB)
[✓] Android toolchain - develop for Android devices (Android SDK version 32.1.0-rc1)
[✓] Xcode - develop for iOS and macOS (Xcode 14.2)
[✓] Chrome - develop for the web
[✓] Android Studio (version 2022.2)
[✓] VS Code (version 1.78.2)
[✓] Connected device (3 available)
[✓] Network resources

• No issues found!

darshankawar · 2023-05-26T07:13:45Z

Thanks for the report @Strain-solutions
I tried the code sample using latest master on mobile and web and below is the observation.

Mobile:

input in text 1 and tap outside, onTapOutside is recognized and printed in console.
input in text 2 and tap outside, onTapOutside is recognized and printed in console.
when tapped on done button from virtual keyboard, the text in text 2 is printed.

Web:

Tapping outside prints in console.

Can you please elaborate what exactly should be the expected behavior and on which platform are you looking to have expected behavior ?

Strain-solutions · 2023-05-29T04:31:24Z

Hi thanks, and sorry if the issue wasn't clear. This is for a web interface for an internal project. Users are presented with a ListView of items (between 1 and possibly a few hundred items). Each widget in the list has a text field for them to complete, and I use the onTapOutside to store any text they write into the repository (it happens to be Firebase, but I don't think that matters particularly).

In the code snippet you can see that if you type into textbox1 and tap outside, that prints to the console. But if you put text into box 1 and tap immediately into textbox 2 (without tapping outside either of the 2 boxes) then nothing is printed on the console, and so in my use case, nothing is stored in the repo.

This matters in a long list on web and if there are more items than can fit on the screen, I have had a few users who will (for example)

type something in the first box on the list,
they then use the scroll wheel on the mouse to scroll further down the screen
here their second tap will be into the textfield of another item where they start writing.
The mouse wheel doesn't trigger the onTapOutside
tapping on the textbox also doesn't trigger onTapOutside
if the user scrolls sufficiently far down the listView, the state of the items no longer on the screen is lost without the onTapOutside ever being called and so many changes are lost.

For now I have a 'submit' button on each item, although I was using the onTapOutside since bitter experience has taught me that my users will routinely not see a big flashing submit button :)

Does that explain the issue more clearly? Please let me know if you need any more info or a screen grab of the problem.

huycozy · 2023-05-30T06:08:57Z

Thanks for providing the context. I'm not sure if using onTapOutside is a good approach for your case since I see all TextFields will trigger onTapOutside when tapping outside (not on next fields). So you may need to implement more things to have expected result.

Anyway, I see onTapOutside is not triggered when tapping on another TextField as you mentioned above. Labeling the issue for further insights.

Reproduced this issue on Android, Web and macOS.

flutter doctor -v (stable and master)

[✓] Flutter (Channel stable, 3.10.2, on macOS 13.0.1 22A400 darwin-x64, locale en-VN)
    • Flutter version 3.10.2 on channel stable at /Users/huynq/Documents/GitHub/flutter
    • Upstream repository https://github.com/flutter/flutter.git
    • Framework revision 9cd3d0d9ff (22 hours ago), 2023-05-23 20:57:28 -0700
    • Engine revision 90fa3ae28f
    • Dart version 3.0.2
    • DevTools version 2.23.1

[✓] Android toolchain - develop for Android devices (Android SDK version 32.0.0)
    • Android SDK at /Users/huynq/Library/Android/sdk
    • Platform android-33, build-tools 32.0.0
    • ANDROID_HOME = /Users/huynq/Library/Android/sdk
    • Java binary at: /Applications/Android Studio.app/Contents/jbr/Contents/Home/bin/java
    • Java version OpenJDK Runtime Environment (build 17.0.6+0-17.0.6b802.4-9586694)
    • All Android licenses accepted.

[✓] Xcode - develop for iOS and macOS (Xcode 14.3)
    • Xcode at /Applications/Xcode.app/Contents/Developer
    • Build 14E222b
    • CocoaPods version 1.11.3

[✓] Chrome - develop for the web
    • Chrome at /Applications/Google Chrome.app/Contents/MacOS/Google Chrome

[✓] Android Studio (version 2022.2)
    • 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.6+0-17.0.6b802.4-9586694)

[✓] VS Code (version 1.78.1)
    • VS Code at /Applications/Visual Studio Code.app/Contents
    • Flutter extension version 3.64.0

[✓] Connected device (3 available)
    • RMX2001 (mobile) • EUYTFEUSQSRGDA6D • android-arm64  • Android 11 (API 30)
    • macOS (desktop)  • macos            • darwin-x64     • macOS 13.0.1 22A400 darwin-x64
    • Chrome (web)     • chrome           • web-javascript • Google Chrome 113.0.5672.126

[✓] Network resources
    • All expected network resources are available.

• No issues found!

[!] Flutter (Channel master, 3.11.0-14.0.pre.73, on macOS 13.0.1 22A400 darwin-x64, locale en-VN)
    • Flutter version 3.11.0-14.0.pre.73 on channel master at /Users/huynq/Documents/GitHub/flutter_master
    ! Warning: `flutter` on your path resolves to /Users/huynq/Documents/GitHub/flutter/bin/flutter, which is not inside your current Flutter SDK checkout at /Users/huynq/Documents/GitHub/flutter_master. Consider adding /Users/huynq/Documents/GitHub/flutter_master/bin to the front of your path.
    ! Warning: `dart` on your path resolves to /Users/huynq/Documents/GitHub/flutter/bin/dart, which is not inside your current Flutter SDK checkout at /Users/huynq/Documents/GitHub/flutter_master. Consider adding /Users/huynq/Documents/GitHub/flutter_master/bin to the front of your path.
    • Upstream repository https://github.com/flutter/flutter.git
    • Framework revision 59128bd61e (49 minutes ago), 2023-05-29 22:35:15 -0400
    • Engine revision 93a8d41549
    • Dart version 3.1.0 (build 3.1.0-155.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 32.0.0)
    • Android SDK at /Users/huynq/Library/Android/sdk
    • Platform android-33, build-tools 32.0.0
    • ANDROID_HOME = /Users/huynq/Library/Android/sdk
    • Java binary at: /Applications/Android Studio.app/Contents/jbr/Contents/Home/bin/java
    • Java version OpenJDK Runtime Environment (build 17.0.6+0-17.0.6b802.4-9586694)
    • All Android licenses accepted.

[✓] Xcode - develop for iOS and macOS (Xcode 14.3)
    • Xcode at /Applications/Xcode.app/Contents/Developer
    • Build 14E222b
    • CocoaPods version 1.11.3

[✓] Chrome - develop for the web
    • Chrome at /Applications/Google Chrome.app/Contents/MacOS/Google Chrome

[✓] Android Studio (version 2022.2)
    • 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.6+0-17.0.6b802.4-9586694)

[✓] VS Code (version 1.78.2)
    • VS Code at /Applications/Visual Studio Code.app/Contents
    • Flutter extension version 3.64.0

[✓] Connected device (3 available)
    • RMX2001 (mobile) • EUYTFEUSQSRGDA6D • android-arm64  • Android 11 (API 30)
    • macOS (desktop)  • macos            • darwin-x64     • macOS 13.0.1 22A400 darwin-x64
    • Chrome (web)     • chrome           • web-javascript • Google Chrome 113.0.5672.126

[✓] Network resources
    • All expected network resources are available.

! Doctor found issues in 1 category.

goderbauer · 2023-05-30T22:15:03Z

cc @gspencergoog

This PR attempts to fix #127597

darshankawar added the in triage Presently being triaged by the triage team label May 26, 2023

darshankawar added the waiting for customer response The Flutter team cannot make further progress on this issue until the original reporter responds label May 26, 2023

github-actions bot removed the waiting for customer response The Flutter team cannot make further progress on this issue until the original reporter responds label May 29, 2023

goderbauer added the P2 Important issues not at the top of the work list label May 30, 2023

flutter-triage-bot bot added team-framework Owned by Framework team triaged-framework Triaged by Framework team labels Jul 8, 2023

huycozy mentioned this issue May 8, 2024

tap on DropdownMenu couldn't trigger onTapOutside event of TextField #147969

Closed

This was referenced May 9, 2024

Fix the second TextFormField to trigger onTapOutside. #148052

Closed

Fix the second TextFormField to trigger onTapOutside #148112

Closed

Fix the second TextFormField to trigger onTapOutside #148206

Merged

auto-submit bot pushed a commit that referenced this issue May 22, 2024

Fix the second TextFormField to trigger onTapOutside (#148206)

9acbc1d

This PR attempts to fix #127597

auto-submit bot closed this as completed in #148206 May 22, 2024

huycozy added the r: fixed Issue is closed as already fixed in a newer version label May 23, 2024

wyqlxf mentioned this issue May 23, 2024

Fix the second TextFormField to trigger onTapOutside #148930

Merged

8 tasks

auto-submit bot pushed a commit that referenced this issue May 23, 2024

Fix the second TextFormField to trigger onTapOutside (#148930)

881e29f

This PR attempts to fix #127597

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

After inputting text into a textFormField tapping into a second TextFormField does not trigger onTapOutside #127597

After inputting text into a textFormField tapping into a second TextFormField does not trigger onTapOutside #127597

Strain-solutions commented May 25, 2023

darshankawar commented May 26, 2023

Strain-solutions commented May 29, 2023

huycozy commented May 30, 2023 •

edited

goderbauer commented May 30, 2023

After inputting text into a textFormField tapping into a second TextFormField does not trigger onTapOutside #127597

After inputting text into a textFormField tapping into a second TextFormField does not trigger onTapOutside #127597

Comments

Strain-solutions commented May 25, 2023

Is there an existing issue for this?

Steps to reproduce

Expected results

Actual results

Code sample

Screenshots or Video

Logs

Flutter Doctor output

darshankawar commented May 26, 2023

Strain-solutions commented May 29, 2023

huycozy commented May 30, 2023 • edited

goderbauer commented May 30, 2023

huycozy commented May 30, 2023 •

edited