[BUG] Hardware keyboard - Focus lost in editor when pressed arrow down - Arrow navigation not working properly

[marekhalmo]

Describe the bug
When in editor and hardware keyboard is connected.
If your text is multiline, you are in first line and you press arrow down - the focus will be shifted to the toolbar below (font sizes, alignment e.t.c.)

To Reproduce
Steps to reproduce the behavior:

1. Create an app with a simple editor window
2. Add toolbar on bottom (font size, alignment)
3. Connect hardware keyboard
4. Fill 2+ lines of text
5. Move cursor to first line
6. Press arrow bottom
7. Focus jumps to toolbar so you can press it's buttons instead of moving to the second line of text

Screenshots
N/A

Device:
iOS (IPhone 6) & Android (Android 13, Realme GM Master Edition - RMX3363)

[marekhalmo]

Might be linked to #272

[marekhalmo]

I think that the Toolbar should be encapsuled in ExcludeFocus node. That is not a flutter bug.

I see no reason why it should be possible to tab to the toolbar.
There are keyboard shortcuts that work (Ctri + U for underlined e.t.c.) and that should be enough. For example it is not possible to tab to the toolbar here on this page so i think that this is a good idea.

What do you think?

Testing this on my fork. Seems to work on in emulator but i need to test it on a real physical keyboard and device ..
https://github.com/marekhalmo/html-editor-enhanced

[marekhalmo]

Wrapping did not help the toolbar in ExcludeFocus did help partially but the focus still jumps out of the text edit so arrow naviagion jumps to random buttons in UI.
This means that the keyboard navigation has to be catched inside the editor and the focus should not be lost. Looking in to this deeper.

[marekhalmo]

Can anyone help? I'm not able to build my local branch and run the example so it is very difficult to fix this..

[marekhalmo]

I'm still trying to find a fix on this. I have successfully build the example from this library but I'm struggling with the solution.

I have tested it on Android and iOS - it works the same on both - arrows go to toolbar or some other element in the UI.
I tried to wrap the toolbar elements in ExcludeFocus node - that helps a bit but there is still no movement in the text when pressing arrows.

I don't know if this is an issue of the underlying summernote library or not. Everything seems to work just OK on the summernote web demo.

Can somebody help?

@tneotia is this in active development?

[marekhalmo]

Hello,

I found a partial solution for now.

Based on this flutter issue:
flutter/flutter#147844

and this proposed solution:
flutter/flutter#102505 (comment)

it is possible to wrap the widget in

List<LogicalKeyboardKey> arrows  = [
    LogicalKeyboardKey.arrowLeft,
    LogicalKeyboardKey.arrowRight,
    LogicalKeyboardKey.arrowUp,
    LogicalKeyboardKey.arrowDown
  ];

Widget getHtmlEditorEnhanced() {
Focus(
        onKeyEvent: (node, event) {
          if (arrows.contains(event.logicalKey)) {
            return KeyEventResult.skipRemainingHandlers;
          }

          return KeyEventResult.ignored;
        },
        child: HtmlEditorEnhanced(.......,
      ),
    );
  }
}

This fixes the keyboard with a small caveat - the first arrow press won't get registered (which is not a big deal for my app)

When i have some time I can make a PR to this project but I guess this should be an official fix for WebView widget in flutter...
`

[marekhalmo]

This might also somehow be related
https://stackoverflow.com/questions/77423908/treat-arrow-keyboard-keys-normally-when-textinput-is-in-focus-but-fire-an-intent\

But when tried it did not fix the issue

DefaultTextEditingShortcuts(
child: .....(),
),