[Web] Unable to write space or use key arrows

[Djcharles26]

My issue is about [Web].

When I try to write a space or use the keyboard arrows I have no response from the editor, but if I try to use this in a TextField or a TextFormField it works correctly.

This is my code:

quill.QuillEditor(
  placeholder: "Enter text",
  focusNode: FocusNode(),
  textCapitalization: TextCapitalization.none,
  scrollController: ScrollController(),
  autoFocus: false,
  padding: EdgeInsets.zero,
  expands: false,
  scrollable: true,
  controller: _controller,
  readOnly: false,
)

I don't know if I'm missing something.
Thanks.

[abdugaliyev]

You can disable space button https://stackoverflow.com/questions/65766557/flutter-web-disable-spacebar-to-scroll

But doesnt work on latest version flutter.

I think need to disable on quill editrors text_area like this

    final Widget child = Semantics(
      enabled: enabled,
      onTap: !enabled || widget.readOnly ? null : () {
        if (!controller.selection.isValid) {
          controller.selection = TextSelection.collapsed(offset: controller.text.length);
        }
        _requestKeyboard();
      },
      child: IgnorePointer(
        ignoring: !enabled,
        child: Container(
          decoration: effectiveDecoration,
          child: _selectionGestureDetectorBuilder.buildGestureDetector(
            behavior: HitTestBehavior.translucent,
            child: Align(
              alignment: Alignment(-1.0, _textAlignVertical.y),
              widthFactor: 1.0,
              heightFactor: 1.0,
              child: _addTextDependentAttachments(paddedEditable, textStyle, placeholderStyle),
            ),
          ),
        ),
      ),
    );

    if (kIsWeb) {
      return Shortcuts(
        shortcuts: scrollShortcutOverrides,
        child: child,
      );
    }
    return child;
  }
} 

But i doesnt know how do it

[abdugaliyev]

Find best solution #304

Found a workaround:

Wrap QuillEditor with a RawKeyboardListener to intercept KeyEvent and prevent it from propagating to parents.

SingleChildScrollView(
        child: RawKeyboardListener(
              onKey: (RawKeyEvent event) {},
              focusNode: FocusNode(onKey: (FocusNode node, RawKeyEvent event) {
                  return KeyEventResult.skipRemainingHandlers;
              }),
              child: QuillEditor(
                    ...
              ),
       ),
)

[Djcharles26]

Find best solution #304

Found a workaround:

Wrap QuillEditor with a RawKeyboardListener to intercept KeyEvent and prevent it from propagating to parents.

SingleChildScrollView(
        child: RawKeyboardListener(
              onKey: (RawKeyEvent event) {},
              focusNode: FocusNode(onKey: (FocusNode node, RawKeyEvent event) {
                  return KeyEventResult.skipRemainingHandlers;
              }),
              child: QuillEditor(
                    ...
              ),
       ),
)

This was the solution, thanks. 👍

[NicolasDionB]

Cheers for the workaround, it works. This should be in the editor itself so we don't have to take that in consideration.

[singerdmx]

So PR please

[NicolasDionB]

There it is 😀 #618

[AlexeyBukin]

I had some issues with newer version of some widgets. Example: I replaced old RadioListTile(s) with RadioGroup + new RadioListTile(s). Radio group has additional keyboard shortcuts and blocks spacebar and arrow keys.

before flutter 3:

Column(
  children: [
    RadioListTile(),
    RadioListTile(),
    RadioListTile(),
    TextField(),
  ]
)

after flutter 3 with a bug:

RadioGroup(
  child: Column(
    children: [
      RadioListTile(),
      RadioListTile(),
      RadioListTile(),

      TextField(), // <- wont receive spacebar and arrows
    ]
  )
)  

after flutter 3 with no bug:

Column(
  children [
    RadioGroup(
      child: Column(
        children: [
          RadioListTile(),
          RadioListTile(),
          RadioListTile(),
        ]
      )
    ),
    TextField(), // <- will receive spacebar and arrows
  ],
)