Text Editing Movement Keys via Shortcuts #75032

justinmc · 2021-01-29T23:31:24Z

This is the first PR to start migrating text editing to use Actions. See the design doc for the entire plan.

This PR focuses only on the arrow keys, including all modifier keys, but it also establishes the pattern for handling all keyboard, mouse, and touch events for text editing.

Example

This example shows how to use an additional Shortcuts widget to override some default text editing keyboard shortcuts to have new behavior. Instead of moving the cursor, alt + up/down will change the focused widget. See the docs for more examples.

@override
Widget build(BuildContext context) {
  // If using WidgetsApp or its descendents MaterialApp or CupertinoApp,
  // then DefaultTextEditingShortcuts is already being inserted into the
  // widget tree.
  return DefaultTextEditingShortcuts(
    child: Center(
      child: Shortcuts(
        shortcuts: const <ShortcutActivator, Intent>{
          SingleActivator(LogicalKeyboardKey.arrowDown, alt: true): NextFocusIntent(),
          SingleActivator(LogicalKeyboardKey.arrowUp, alt: true): PreviousFocusIntent(),
        },
        child: Column(
          children: const <Widget>[
            TextField(
              decoration: InputDecoration(
                hintText: 'alt + down moves to the next field.',
              ),
            ),
            TextField(
              decoration: InputDecoration(
                hintText: 'And alt + up moves to the previous.',
              ),
            ),
          ],
        ),
      ),
    ),
  );
}

Issues

Partial fix for #75004.
Closes #76121

Tests

Test that it's possible to remap a shortcut to a different shortcut's Intent.
Test that's possible to write a custom Action to completely change a text editing Intent's behavior.
Update RenderEditable tests that relied on the keyboard and have them call new methods instead.

Breaking changes

None.

…nvoke

…respond too all actions

…uts widget.

… code

…nt in RenderEditable

…ness logic is stored

…able

…reDetector with deprecations

justinmc · 2021-03-10T22:42:44Z

@LongCatIsLooong @goderbauer Updated with your suggestions and ready for re-review, thanks!

One thing I didn't implement to look at: #75032 (comment)

LongCatIsLooong

LGTM 🎉

LongCatIsLooong · 2021-03-10T23:30:12Z

packages/flutter/lib/src/widgets/default_text_editing_actions.dart

+///   * [DefaultTextEditingShortcuts], which maps keyboard keys to many of the
+///     [Intent]s that are handled here.
+///   * [WidgetsApp], which creates a DefaultTextEditingShortcuts.
+class DefaultTextEditingActions extends StatelessWidget {


nit: is it possible to just subclass Actions?

Yes, and it saves a good amount of lines of code. Thanks for the suggestion. Same for Shortcuts as you mentioned below.

LongCatIsLooong · 2021-03-10T23:31:31Z

packages/flutter/lib/src/widgets/default_text_editing_actions.dart

+  @override
+  Widget build(BuildContext context) {
+    return Actions(
+      actions: <Type, Action<Intent>>{


nit: isn't this just:

Suggested change

actions: <Type, Action<Intent>>{

actions: _shortcutsActions,

Yeah, I had a big setup for handling other types of actions that I deleted. I'll simplify to just _shortcutActions for now.

LongCatIsLooong · 2021-03-10T23:43:21Z

packages/flutter/lib/src/widgets/default_text_editing_shortcuts.dart

+///     behavior.
+///   * [WidgetsApp], which creates a DefaultTextEditingShortcuts.
+class DefaultTextEditingShortcuts extends StatelessWidget {
+  /// Creates an instance of DefaultTextEditingShortcuts.


nit: this seems to say very little about what this is by itself. maybe:

Creates a [Shortcuts] widget that provides the default text editing shortcuts on the current platform (basically copying the first summary line of the class).

LongCatIsLooong · 2021-03-10T23:47:31Z

packages/flutter/lib/src/widgets/default_text_editing_shortcuts.dart

+///     respond to the [Intent]s in these shortcuts with the default text editing
+///     behavior.
+///   * [WidgetsApp], which creates a DefaultTextEditingShortcuts.
+class DefaultTextEditingShortcuts extends StatelessWidget {


nit: this is basically a specialized Shortcuts widget. Maybe subclass Shortcuts too, so we get a shallower tree?

LongCatIsLooong · 2021-03-11T00:01:35Z

packages/flutter/lib/src/widgets/text_editing_action.dart

+  }
+
+  @override
+  bool isEnabled(Intent intent) {


super nit:

Suggested change

bool isEnabled(Intent intent) {

bool isEnabled(T intent) {

TimWhiting · 2021-03-11T03:04:16Z

Would #77512 be in scope for this? It involves Shortcuts and Text Editing and is a simple but important missing feature for desktop. I don't necessarily want to create a PR right now if text editing is already being refactored.

justinmc · 2021-03-11T18:48:51Z

@TimWhiting I think that's not in scope for this PR, but thanks for bringing it to my attention. The Shortcuts approach for that might be viable, but we should figure out exactly how the behavior should work. Let's continue the discussion on #77512.

goderbauer

LGTM

venkatd · 2021-03-12T00:58:43Z

@justinmc thanks for all the work on this PR! Love where things are headed with customizability of text editing.

Inability to override shortcuts in a TextField has been a blocker for releasing a Flutter web app to production. Does this PR apply to Flutter web? If not, maybe I can create a separate issue to discuss the use case?

I noticed the comment:

// The Action is disabled if there is no focused TextEditingActionTarget, or
// if the platform is web, because web lets the browser handle text editing.

I wonder if there's a way to allow the browser to handle text editing but still allow overriding the default browser behavior by creating Shortcuts.

justinmc · 2021-03-17T21:58:58Z

@venkatd No problem, thank you for the reviews on this!

I think everything should work as expected with web. See this thread above: #75032 (comment)

So using a Shortcuts widget will allow you to intercept key events like up-arrow before they go to the web engine, just like they will also be intercepted on other platforms before being handled by the framework. This is important for us too, like for @shihaohong who is working on keyboard controls for Autocomplete now.

If something doesn't work as expected let me know, though. I think Autocomplete will be the first use of this in the framework itself and it's not finished yet.

venkatd · 2021-03-18T15:54:09Z

@justinmc great to hear! Will give the master branch a try this week.

justinmc added 30 commits November 3, 2020 13:13

TextEditingBehavior class that works for single taps at least

3739626

Do gesture detecting directly in editabletext

a21f967

WIP I don't know what I was doing

4789c7e

WIP investigating actions

b0677b6

Working example of dispatching actions to do text taps

c8806cf

Put Actions widget at root of app and use Actions static methods to i…

e718405

…nvoke

Overriding onSingleTapUp in CupertinoTextField!

6c976a9

Use full and reusable TextEditingGestureDetector for gesture detection

17c9a45

Using TextEditingGestureDetector in Material TextField too.

d147d88

nullOk for action invocations, because maybe some custom inputs dont …

505e890

…respond too all actions

WIP TODOs

6fa415f

Merge branch 'master' into text-editing-refactor

5215d3f

A keyboard key event via action/intent (left arrow)

7b71266

Merge branch 'master' into text-editing-refactor

ba98670

Shortcuts working to handle left arrow key. Maybe need to move Shortc…

12ca408

…uts widget.

Top level Shortcut that can access the relevant RenderEditable.

76b1527

Custom Action type for text editing actions

dc00ed2

Text Editing shortcuts cascade with other shortcuts

3e8d64d

TextEditingShortcuts widget and cleanup of root app shortcuts/actions…

fa73b1e

… code

moveSelectionRight working, and some code cleanup of arrow key moveme…

a11567b

…nt in RenderEditable

First key combos: shift left/right

39689a4

Word modifier right/left arrows

797dd7d

Skip whitespace when moving by word on Mac

d0dd041

Move static methods to top, fix TODO bugs for uncollapsed selection

97b9dff

Quick POC for cmd-c for copy

fca0f25

TextEditingActions widget, which I think may be where all of the busi…

77365aa

…ness logic is stored

Split out TextEditingAction to its own file to make files more manage…

ea5c600

…able

No more text_editing_behavior.dart, using existing TextSelectionGestu…

d627724

…reDetector with deprecations

Merge branch 'master' into text-editing-refactor

faa7474

It seems nullOk was removed

f60e2ff

justinmc added 3 commits March 8, 2021 13:54

Code review and docs improvements

6bd8178

Test fix after rearranging actions/defaults

5de7afa

Analyzer fix

97e4977

justinmc mentioned this pull request Mar 10, 2021

Add awareness for cursor position in selection-related behaviors across desktop platforms #57679

Closed

justinmc added 2 commits March 10, 2021 11:31

Only DoNothingAndStopPropagation when its for a text editing event!

2506ee6

Merge branch 'master' into text-editing-refactor

f2f4135

justinmc force-pushed the text-editing-refactor branch from 10ea1ba to f2f4135 Compare March 10, 2021 21:34

LongCatIsLooong approved these changes Mar 11, 2021

View reviewed changes

Code review fixes, converting DefaultActions/Shortcuts to subclasses

1f1b56f

goderbauer approved these changes Mar 11, 2021

View reviewed changes

Fix test with change to widget tree from subclassing

9814f0b

justinmc merged commit 541bff4 into flutter:master Mar 11, 2021

justinmc deleted the text-editing-refactor branch March 11, 2021 23:52

This was referenced Mar 19, 2021

Mac word modifier TextEditingActions #78573

Merged

Fix web text field shortcuts #79056

Merged

justinmc mentioned this pull request Mar 30, 2021

Text Editing Actions - SingleTapUp #79414

Closed

justinmc mentioned this pull request May 18, 2021

[Proposal] Autocomplete Desktop Keyboard Support #82783

Closed

flutter-dashboard bot added the f: cupertino flutter/packages/flutter/cupertino repository label Sep 15, 2021

temper357 mentioned this pull request Jan 13, 2022

Flutter 升级到 2.5 后 Input 内文本无法删除 openkraken/kraken#1092

Closed

sevenrats mentioned this pull request Sep 12, 2024

feat: added autocomplete options to url input jellyflix-app/jellyflix#128

Merged

Text Editing Movement Keys via Shortcuts #75032

Text Editing Movement Keys via Shortcuts #75032

Uh oh!

Conversation

justinmc commented Jan 29, 2021 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Example

Issues

Tests

Breaking changes

Uh oh!

justinmc commented Mar 10, 2021 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

LongCatIsLooong left a comment

Choose a reason for hiding this comment

Uh oh!

LongCatIsLooong Mar 10, 2021

Choose a reason for hiding this comment

Uh oh!

justinmc Mar 11, 2021

Choose a reason for hiding this comment

Uh oh!

LongCatIsLooong Mar 10, 2021

Choose a reason for hiding this comment

Uh oh!

justinmc Mar 11, 2021

Choose a reason for hiding this comment

Uh oh!

LongCatIsLooong Mar 10, 2021

Choose a reason for hiding this comment

Uh oh!

LongCatIsLooong Mar 10, 2021

Choose a reason for hiding this comment

Uh oh!

LongCatIsLooong Mar 11, 2021

Choose a reason for hiding this comment

Uh oh!

TimWhiting commented Mar 11, 2021 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

justinmc commented Mar 11, 2021

Uh oh!

goderbauer left a comment

Choose a reason for hiding this comment

Uh oh!

venkatd commented Mar 12, 2021 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

justinmc commented Mar 17, 2021

Uh oh!

venkatd commented Mar 18, 2021

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

11 participants

justinmc commented Jan 29, 2021 •

edited

Loading

justinmc commented Mar 10, 2021 •

edited

Loading

TimWhiting commented Mar 11, 2021 •

edited

Loading

venkatd commented Mar 12, 2021 •

edited

Loading