Poor UX: cursor hidden behind soft keyboard on initial tap

vishna commented 3 weeks ago

Is there an existing issue for this?

[X] I have searched the existing issues

Flutter Quill version

10.4.0

iOS simulator, (and some low end Android device)

Steps to reproduce

Open Flutter Quill Demo from the example folder
Go to Text sample
Tap the text somewhere on the bottom half of the screen, e.g. where Create a Bujo of Ledger is

Expected results

Keyboard appears and I can see the cursor where I tapped:

Actual results

Keyboard appears but the cursor is hidden behind the keyboard as the text scroll position did not adjust.

Tapping any key on the keyboard will make cursor visible again.

Code sample

No response

Additional Context

Workaround

Here's something I came up real quick to mitigate this issue

Listen to keyboard visibility changes
If keyboard becomes visible
- wait around 300ms for things to settle 😬
- call ensureCursorVisible extension method on the controller (this will re-trigger positioning):

extension QuillControllerInvisibleCursorFix on QuillController {
  void ensureCursorVisible() {
    if (selection.isCollapsed) {
      final position = selection.end;
      moveCursorToPosition(position);
    }
  }
}

Ideally this is handled by library, which should know cursor got pushed outside of viewport and react accordingly.

vishna commented 2 weeks ago

...so commenting out this section in raw_editor_state.dart

makes the simulator behave as expected. That said, we initially encountered this issue on a real device.

I still can't find the definitive information whether callback from flutter_keyboard_visibility happens before or after the keyboard is shown:

most likely before tho

vishna commented 2 weeks ago

I've examined the plugin a bit on iOS. The keyboard is reported as visible as soon as system knows the keyboard will appear (no difference between didShow, willShow) :

https://github.com/MisterJimson/flutter_keyboard_visibility/blob/master/flutter_keyboard_visibility/ios/Classes/FlutterKeyboardVisibilityPlugin.m#L43

This in turn can cause wrong calculation of the offset in QuillRawEditorState._showCaretOnScreen since _scrollController.position.viewportDimension will not be updated to the shrunk size.

It would be nice to decouple flutter_quill library from the flutter_keyboard_visibility library (since it seems a bit stale) and make e.g. ValueNotifier<bool> keyboardVisible a field you need to provide to the editor. This way you could use any other implementation freely.

Other than that, I still wonder why we treat iOS Simulator differently from iOS. This leads to extra bug reports, doesn't it? 🤔 /cc @singerdmx

singerdmx / flutter-quill