Read-only TextField prevents focus from changing #161482

Activity

1. raslan1994 commented on Jan 12, 2025

   

   raslan1994

   on Jan 12, 2025

   More actions

   In order to skip the node from focus traversal policy, you can use FocusNode(skipTraversal: true) for that specific TextField

   example:

   TextField(
     focusNode: FocusNode(skipTraversal: true),
     readOnly: true,
     decoration: InputDecoration(labelText: 'Readonly TextField'),
   ),

   As per your code sample you can do the alteration as follows,

   class Foo extends StatelessWidget {
     const Foo({super.key});
   
     @override
     Widget build(BuildContext context) => MaterialApp(
           home: Scaffold(
             body: SafeArea(
               child: Column(
                 children: [
                   TextField(
                     decoration: InputDecoration(labelText: 'Editable TextField'),
                   ),
                   TextField(
                     focusNode: FocusNode(skipTraversal: true),
                     readOnly: true,
                     decoration: InputDecoration(labelText: 'Readonly TextField'),
                   ),
                   TextField(
                     decoration:
                         InputDecoration(labelText: 'Another Editable TextField'),
                   ),
                 ],
               ),
             ),
           ),
         );
   }
2. Pante commented on Jan 12, 2025

   

   Pante

   on Jan 12, 2025

   ContributorAuthor

   More actions

   I don't think that solution is ideal as it skips the TextField entirely.
3. huycozy

   added

   in triagePresently being triaged by the triage teamPresently being triaged by the triage team

   on Jan 13, 2025
4. huycozy commented on Jan 13, 2025

   

   huycozy

   on Jan 13, 2025

   Member

   More actions

   Reproduced the issue on Flutter master channel 3.28.0-2.0.pre.38699 as well. Also marking this has a workaround as mentioned above.Thanks!
5. huycozy

   added

   a: text inputEntering text in a text field or keyboard related problemsEntering text in a text field or keyboard related problems

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

   f: focusFocus traversal, gaining or losing focusFocus traversal, gaining or losing focus

   has reproducible stepsThe issue has been confirmed reproducible and is ready to work onThe issue has been confirmed reproducible and is ready to work on

   workaround availableThere is a workaround available to overcome the issueThere is a workaround available to overcome the issue

   team-text-inputOwned by Text Input teamOwned by Text Input team

   found in release: 3.27Found to occur in 3.27Found to occur in 3.27

   found in release: 3.28Found to occur in 3.28Found to occur in 3.28

   and removed

   in triagePresently being triaged by the triage teamPresently being triaged by the triage team

   on Jan 13, 2025
6. Pante commented on Jan 13, 2025

   

   Pante

   on Jan 13, 2025

   ContributorAuthor

   More actions

   @huycozy I don't believe the workaround is desirable. In my mind, the focus should move to the read-only textfield, then the next focus item, rather than skipping the read-only textfield entirely.
7. justinmc

   added

   P2Important issues not at the top of the work listImportant issues not at the top of the work list

   triaged-text-inputTriaged by Text Input teamTriaged by Text Input team

   on Jan 16, 2025
8. justinmc commented on Jan 16, 2025

   

   justinmc

   on Jan 16, 2025

   Contributor

   More actions

   @Pante Can you break down where the focus goes each time you press the tab key and where you expect it to go?
9. Pante commented on Jan 17, 2025

   

   Pante

   on Jan 17, 2025

   ContributorAuthor

   More actions

   Given the following code snippet:

   void main() => runApp(const Foo());
   
   class Foo extends StatelessWidget {
     const Foo({super.key});
   
     @override
     Widget build(BuildContext context) => const MaterialApp(
       home: Scaffold(
         body: Column(
           children: [
             TextField(),
             TextField(readOnly: true),
             TextField(),
           ],
         ),
       ),
     );
   }

   Assuming that I'm focused on the first text-field, the current implementation shifts to the 2nd textfield unlike the proposed workaround which shifts to the 3rd textfield. This is expected behavior.

   When focused on the 2nd textfield, the current implementation retains the focus on the 2nd textfield regardless of how many times I press tab. I expect the focus to shift to the 3rd textfield when I press tab once.
10. bleroux

    self-assigned this

    on Mar 25, 2025
11. bleroux

    added this to Nevercodeon Mar 25, 2025
12. github-project-automation

    moved this to To do in Nevercodeon Mar 25, 2025
13. bleroux

    moved this from To do to In progress in Nevercodeon Mar 26, 2025
14. github-merge-queue

    added a commit that references this issue on Apr 3, 2025

    Fix read only TextField focus traversal on macOS (#166056)

    ...

    b85c0fc
15. auto-submit

    closed this as completedin #166056on Apr 3, 2025
16. github-project-automation

    moved this from In progress to Done (PR merged) in Nevercodeon Apr 3, 2025
17. bleroux

    added

    r: fixedIssue is closed as already fixed in a newer versionIssue is closed as already fixed in a newer version

    on Apr 3, 2025
18. github-actions commented on Apr 17, 2025

    

    github-actionsbot

    on Apr 17, 2025 – with GitHub Actions

    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.
19. github-actions

    locked as resolved and limited conversation to collaborators on Apr 17, 2025