flutter-quill icon indicating copy to clipboard operation
flutter-quill copied to clipboard

Poor UX: cursor hidden behind soft keyboard on initial tap

Open vishna opened this issue 1 year ago • 4 comments

Is there an existing issue for this?

Flutter Quill version

10.4.0

iOS simulator, (and some low end Android device)

Steps to reproduce

  1. Open Flutter Quill Demo from the example folder
  2. Go to Text sample
  3. 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 avatar Aug 22 '24 09:08 vishna

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

Screenshot 2024-08-30 at 15 29 47

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:

  • https://github.com/MisterJimson/flutter_keyboard_visibility/issues/108
  • https://github.com/MisterJimson/flutter_keyboard_visibility/issues/121
  • https://github.com/MisterJimson/flutter_keyboard_visibility/issues/122

most likely before tho

vishna avatar Aug 30 '24 13:08 vishna

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

vishna avatar Aug 30 '24 15:08 vishna

Does this issue still persists? If not i will close it.

CatHood0 avatar Sep 21 '24 03:09 CatHood0

Does fixing this issue in a clean way require native code? Is it only for mobile?

Does this issue still persists? If not i will close it.

Should still be an issue

EchoEllet avatar Sep 21 '24 13:09 EchoEllet

This is still an issue and I'm able to reproduce on both Android and iOS, physical and simulated.

Zambrella avatar Nov 25 '24 12:11 Zambrella