tneotia / html-editor-enhanced

A Flutter package that provides a WYSIWYG editor backed by flutter_inappwebview and the Summernote library.
https://pub.dev/packages/html_editor_enhanced
MIT License
274 stars 334 forks source link

[BUG] Using HtmlEditor with a Flutter TextField #312

Open adamappdev opened 2 years ago

adamappdev commented 2 years ago

Describe the bug When using the HtmlEditor on Android and iOS with a TextField in the same page, focusing on the TextField and then HtmlEditor, the focus will not go away from TextField

To Reproduce I have created a minimal bug reproduction project Steps to reproduce the behavior:

  1. Clone the bug minimal project
  2. Run on Android or iOS
  3. there is a TextField and an HtmlEditor on top of each other
  4. Tap on the TextField to focus on it
  5. Now tap on the HtmlEditor to focus on it

Expected behavior Tapping on HtmlEditor should remove the focus from TextField, but it does not

Device: Android and iOS

Additional context Although I've created a complete reproduction project, here is the simplified Widget that triggers this bug:

class MyHomePage extends StatefulWidget {
  const MyHomePage({Key? key}) : super(key: key);

  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  final controller = HtmlEditorController();

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(),
      body: ListView(
        children: [
          const TextField(),
          HtmlEditor(controller: controller),
        ],
      ),
    );
  }
}
llFurtll commented 2 years ago

image

For now I'm doing it this way, in the editor's onfocus, I remove the focus from the text field, on the other hand I try to focus the editor but the keyboard doesn't open again.

adamappdev commented 2 years ago

Yes I tried some of these tricks but could not reach a result, I also tried playing with the source code of this package but still I didn't know how to fix this

tneotia commented 2 years ago

It isn't possible to fix with the current state of webivews in Flutter. They do not handle focus correctly and it is by far one of the worst issues with this package that I wish I could fix.

adamappdev commented 2 years ago

@tneotia Is there a roadmap or a place we can start working on to help with bringing this fix?

Alspb commented 1 year ago

That's a pretty odd behavior. However, fortunately the input itself works correctly. So, as a temporary and awkward workaround it's possible to style TextField as unfocused when the editor receives focus, even if the TextField is in fact still focused, and style the TextField as focused again after a tap on it.