Clearing a TextField by tapping on its suffixIcon causes its ripple to break, and the field stays gray. #36324

Activity

1. jifalops

   changed the title [-]Unfocusing a TextField when its suffixIcon is tapped [/-] [+]Unfocusing a TextField when its suffixIcon is tapped causes exception, ripple breaks[/+] on Jul 17, 2019
2. jifalops

   changed the title [-]Unfocusing a TextField when its suffixIcon is tapped causes exception, ripple breaks[/-] [+]Setting TextField controller text when its suffixIcon is tapped causes exception, ripple breaks[/+] on Jul 17, 2019
3. HansMuller

   added

   p: material_uimaterial_ui package in flutter/packagesmaterial_ui package in flutter/packages

   frameworkflutter/packages/flutter repository. See also f: labels.flutter/packages/flutter repository. See also f: labels.

   on Jul 17, 2019
4. HansMuller commented on Jul 17, 2019

   

   HansMuller

   on Jul 17, 2019

   Contributor

   More actions

   Sorry, I'm not clear on the error being reported here. Can you provide a small self-contained app that demonstrates the problem in terms of an unmodified version of Flutter? Note also: https://gist.github.com/ is a useful way to share the code.
5. HansMuller

   added

   waiting for responseThe Flutter team cannot make further progress on this issue until the original reporter respondsThe Flutter team cannot make further progress on this issue until the original reporter responds

   on Jul 17, 2019
6. jifalops commented on Jul 17, 2019

   

   jifalops

   on Jul 17, 2019

   Last edited by jifalops

   Author

   More actions

   Here's a minimal example.

   import 'package:flutter/material.dart';
   
   const appName = 'Breaks Ripple';
   
   void main() => runApp(MaterialApp(title: appName, home: BreakTheRipple()));
   
   class BreakTheRipple extends StatelessWidget {
     final controller = TextEditingController(text: 'clear the text');
     @override
     Widget build(BuildContext context) {
       return Scaffold(
         appBar: AppBar(title: Text(appName)),
         body: ListView(
           padding: EdgeInsets.all(24),
           children: <Widget>[
             TextField(
               controller: controller,
               decoration: InputDecoration(
                 suffixIcon: IconButton(
                   icon: Icon(Icons.close),
                   onPressed: () {
                     // Workaround exception
                     // await Future.delayed(Duration(milliseconds: 10));
   
                     // Throws exception onTapUp
                     controller.clear();
                   },
                 ),
               ),
             ),
           ],
         ),
       );
     }
   }

   Flutter 1.7.8+hotfix.3 • channel stable • https://github.com/flutter/flutter.git
   Framework • revision b712a172f9 (8 days ago) • 2019-07-09 13:14:38 -0700
   Engine • revision 54ad777fd2
   Tools • Dart 2.4.0
   
7. no-response

   removed

   waiting for responseThe Flutter team cannot make further progress on this issue until the original reporter respondsThe Flutter team cannot make further progress on this issue until the original reporter responds

   on Jul 17, 2019
8. jifalops

   changed the title [-]Setting TextField controller text when its suffixIcon is tapped causes exception, ripple breaks[/-] [+]Clearing a TextField by tapping on its suffixIcon causes its ripple to break, and the field stays gray.[/+] on Jul 17, 2019
9. jifalops commented on Jul 19, 2019

   

   jifalops

   on Jul 19, 2019

   Author

   More actions

   @HansMuller I'm surprised by how easy the ripple is broken here. This might be a critical bug. Just wanted to make sure you saw my last comment.
10. jifalops commented on Aug 6, 2019

    

    jifalops

    on Aug 6, 2019

    Author

    More actions

    This is basically the same as #35848, #35909, #36065, #36671, and similar to #17647. The workaround is to clear the controller after the next frame or some delay. I've read it's because clicking the suffix icon causes the field to gain focus, and then it attempts to select text, but there is no text.

    👍React with 👍1Reacted by YarinOmesi
11. jifalops

    closed this as completedon Aug 6, 2019
12. HansMuller commented on Aug 6, 2019

    

    HansMuller

    on Aug 6, 2019

    Contributor

    More actions

    @jifalops Thanks for the input, I've seen the test case and appreciate the rollup of similar issues.
13. justinmc commented on Aug 6, 2019

    

    justinmc

    on Aug 6, 2019

    Contributor

    More actions

    The question is, should prefixes and suffixes pass taps through to the text field or not?

    When vertical alignment was implemented for Material and Cupertino, we made the decision to pass touch gestures through to the text field in all cases except for CupertinoTextField's built in clear button. This is the code where CupertinoTextField explicitly ignores taps on the clear button.

    We could reverse the behavior and ignore taps on all prefixes and suffixes. Or we could instead add new parameters like ignoreTapsOnSuffix. @jifalops What do you think? Any other ideas?

    👍React with 👍1Reacted by Leandro Carvalho
14. jifalops commented on Aug 6, 2019

    

    jifalops

    on Aug 6, 2019

    Author

    More actions

    It does seem like passing taps to the text field would be the right thing to do in principle. I'm not sure if Flutter has any mechanism to allow the suffix icon to consume the tap like in DOM. I kind of lean towards calling clear() on the controller during a tap should not cause an error either way.
15. 3 remaining items

    Load more

16. justinmc commented on Aug 12, 2019

    

    justinmc

    on Aug 12, 2019

    Contributor

    More actions

    Unfortunately it's not possible to do something like event.stopPropagation() from the web world in Flutter, because Flutter uses an "event arena" model instead of event bubbling like the web.

    I'm thinking the idea of some flag/flags on TextField would be a good solution.
17. callumclift commented on Aug 16, 2019

    

    callumclift

    on Aug 16, 2019

    More actions

    any updates on this? it's pretty much broken all of my text fields as i use the suffix icon to allow users to clear their text
18. justinmc commented on Aug 16, 2019

    

    justinmc

    on Aug 16, 2019

    Contributor

    More actions

    @callumclift I'll try to put up a "work in progress" PR as a proposal for how we might solve this later today. I'll post back here when I do.

    👍React with 👍1Reacted by Callum Clift
19. justinmc commented on Aug 16, 2019

    

    justinmc

    on Aug 16, 2019

    Contributor

    More actions

    @callumclift (and anyone else that is interested) please let me know what you think of this approach! #38722
20. callumclift commented on Aug 17, 2019

    

    callumclift

    on Aug 17, 2019

    Last edited by callumclift

    More actions

    @justinmc sounds good, how are you coming along with a solution for Material? I'm using material TextFormField (due to its validator parameter which cupertino text fields don't have.) Also not sure if this is related but if you tap a textformfield to gain focus then tap the suffix icon without typing anything the tap is not registered on the suffix icon, instead it bring up the Paste & Select All options (on iPhone)
21. justinmc commented on Aug 19, 2019

    

    justinmc

    on Aug 19, 2019

    Contributor

    More actions

    Thanks, good to know that would work. I'll keep that suffix tapping problem in mind as I build this. It sounds like it should be fixed by this change.

    I think I can solve the problem in Material in the same way (same two parameters), but the code will just be a bit more indirect.
22. callumclift commented on Aug 19, 2019

    

    callumclift

    on Aug 19, 2019

    More actions

    @justinmc awesome, any ideas on timescales for this?
23. justinmc commented on Aug 19, 2019

    

    justinmc

    on Aug 19, 2019

    Contributor

    More actions

    I wouldn't count on it landing in master for a few weeks. I'm going to talk to some teammates about the Material solution tomorrow though and that will give me a better idea.

    👍React with 👍2Reacted by Callum Clift and Graham Baldeck
24. callumclift commented on Sep 4, 2019

    

    callumclift

    on Sep 4, 2019

    More actions

    @justinmc is there any updates on when a fix will be available on master roughly?
25. JZ-at-TP commented on Sep 5, 2019

    

    JZ-at-TP

    on Sep 5, 2019

    More actions

    This is preventing us from updating Flutter as well.
26. justinmc commented on Sep 12, 2019

    

    justinmc

    on Sep 12, 2019

    Last edited by justinmc

    Contributor

    More actions

    I've got a WIP pull request #38722, but I need to get some time to finish it... Sorry for holding everyone up!
27. justinmc commented on Sep 24, 2019

    

    justinmc

    on Sep 24, 2019

    Contributor

    More actions

    Here is an open issue about this problem: #39376
28. DeveloperWaybee commented on Mar 16, 2020

    

    DeveloperWaybee

    on Mar 16, 2020

    Last edited by DeveloperWaybee

    More actions

    SOLUTION

    Here's the solution for a suffix or prefix taps

    Solution Link
29. lock commented on Apr 2, 2020

    

    lockbot

    on Apr 2, 2020

    More actions

    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.
30. lock

    locked and limited conversation to collaborators on Apr 2, 2020