Keyboard closes on tap outside of super editor in Mobile Web

[hawkkiller]

Package Version
Github, main

To Reproduce
Steps to reproduce the behavior:

1. Run code sample in mobile browser (I tested on iOS)
2. Focus editor, so that the keyboard is opened
3. Tap the toggle button
4. See that the keyboard closes

Minimal Reproduction Code

Minimal, Runnable Code Sample

import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:super_editor/super_editor.dart';

void main() {
runApp(const MainApp());
}

class MainApp extends StatefulWidget {
const MainApp({super.key});

@override
State<MainApp> createState() => _MainAppState();
}

class _MainAppState extends State<MainApp> {
late final MutableDocument document;
late final Editor editor;
late final MutableDocumentComposer composer;
bool selected1 = false;
bool selected2 = false;
bool selected3 = false;

@override
void initState() {
  super.initState();

  document = MutableDocument.empty();
  composer = MutableDocumentComposer();
  editor =
      createDefaultDocumentEditor(document: document, composer: composer);
}

@override
Widget build(BuildContext context) {
  return MaterialApp(
    home: Builder(builder: (context) {
      return Scaffold(
        body: Padding(
          padding: MediaQuery.of(context).padding,
          child: CustomScrollView(
            slivers: [
              SliverList.list(
                children: [
                  ToggleButtons(
                    onPressed: (index) {},
                    isSelected: const [false, false, false],
                    children: const [
                      Icon(Icons.ac_unit),
                      Icon(Icons.call),
                      Icon(Icons.cake),
                    ],
                  ),
                  const SizedBox(height: 400),
                ],
              ),
              SliverToBoxAdapter(
                child: SuperEditor(
                  editor: editor,
                  document: document,
                  composer: composer,
                ),
              )
            ],
          ),
        ),
      );
    }),
  );
}
}

Actual behavior
Keyboard closes.

Expected behavior
The keyboard is not closed.

Platform
iOS Web.

Additional context
In flutter docs, there is a TextFieldTapRegion that seems to work with text fields (though with some problems).

I have tried wrapping toggle buttons in TapRegion and providing the same group id to SuperEditor, but it doesn't seem to work.

cc: @matthew-carroll @angelosilvestre

[matthew-carroll]

At first glance, this doesn't look like a SuperEditor issue - it looks like a focus management issue.

The focused widget receives key events and IME input, so Super Editor can't keep the keyboard open if focus moves to a different widget. My guess is that tapping on the toggle button is changing focus to that button.

SuperEditor lets you specify a focusNode. It also lets you specify a tagRegionGroupId. Can you please try to use the available focus-related properties on SuperEditor to get the result that you want?

@angelosilvestre do you have any other thoughts on this?

[hawkkiller]

It is not necessarily a button. Tapping on any surface in Mobile Web closes the keyboard (material TextField as well). Another problem is that the SuperEditor stays focused (or at least paints the cursor).

RPReplay_Final1714545251.mov

[matthew-carroll]

Tapping on any surface in Mobile Web closes the keyboard (material TextField as well)

Right. I didn't say it was about the button. I said it was about the focus node that's probably inside the button, which is probably receiving focus when you tap on it.

Another problem is that the SuperEditor stays focused (or at least paints the cursor).

This may or may not be a bug. Depends on the exact situation.

[angelosilvestre]

By default, SuperEditor will close the IME connection when it loses focus. This will cause the keyboard to close.

If you want to keep the keyboard visible, you need to either:

• Configure the editor to keep the IME connection open even without focus (by providing a SuperEditorImePolicies).
• Configure the desired widgets to share focus with the editor, so when they are focused, the editor still has non-primary focus.

[matthew-carroll]

@hawkkiller please let us know if Angelo's message resolved your issues.

[hawkkiller]

Hi @matthew-carroll @angelosilvestre

I've just verified that neither setting tap regions, focus nodes, or configuring the policy doesn't work (at least for the code provided).

Do you have any suggestions to check?

Widget build(BuildContext context) => MaterialApp(
        home: Builder(builder: (context) {
          return Scaffold(
            body: Padding(
              padding: MediaQuery.of(context).padding,
              child: Focus(
                focusNode: _focusNode,
                child: CustomScrollView(
                  slivers: [
                    SliverToBoxAdapter(
                      child: Center(
                        child: TapRegion(
                          groupId: 'super_editor',
                          child: ToggleButtons(
                            onPressed: (index) {},
                            isSelected: const [false, false, false],
                            children: const [
                              Icon(Icons.ac_unit),
                              Icon(Icons.call),
                              Icon(Icons.cake),
                            ],
                          ),
                        ),
                      ),
                    ),
                    SliverToBoxAdapter(
                      child: SuperEditor(
                        imePolicies: const SuperEditorImePolicies(
                          closeKeyboardOnSelectionLost: false,
                          closeImeOnNonPrimaryFocusLost: false,
                          closeKeyboardOnLosePrimaryFocus: false,
                        ),
                        tapRegionGroupId: 'super_editor',
                        focusNode: _focusNode,
                        editor: editor,
                        document: document,
                        composer: composer,
                      ),
                    ),
                  ],
                ),
              ),
            ),
          );
        }),
      );

[angelosilvestre]

@hawkkiller Please try to do something like this:

Widget build(BuildContext context) => MaterialApp(
    home: Builder(builder: (context) {
      return Scaffold(
        body: Padding(
          padding: MediaQuery.of(context).padding,
          child: CustomScrollView(
            slivers: [
              SliverToBoxAdapter(
                child: Center(
                  child: Focus(
                    focusNode: _buttonsFocusNode,
                    parentNode: _editorFocusNode,
                    child: ToggleButtons(
                      onPressed: (index) {},
                      isSelected: const [false, false, false],
                      children: const [
                        Icon(Icons.ac_unit),
                        Icon(Icons.call),
                        Icon(Icons.cake),
                      ],
                    ),
                  ),
                ),
              ),
              SliverToBoxAdapter(
                child: SuperEditor(                                         
                  focusNode: _editorFocusNode,
                  editor: editor,
                  document: document,
                  composer: composer,
                ),
              ),
            ],
          ),
        ),
      );
    }),
  );

[hawkkiller]

@angelosilvestre Keyboard still closes and this happens only on the Mobile Web (where clicking anywhere closes the keyboard by default for some reason, which is not typical for other platforms).

For example, this issue doesn't occur on mobile (if launched not via Web).

[hawkkiller]

If you need assistance with debugging, testing, or experimenting with potential fixes for this problem, I'm happy to help you.

[angelosilvestre]

@hawkkiller Did you try to use my sample code and also provide the IME policies?

[hawkkiller]

@angelosilvestre Yes!