Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Poor UX: cursor hidden behind soft keyboard on initial tap #2137

Open
1 task done
vishna opened this issue Aug 22, 2024 · 5 comments
Open
1 task done

Poor UX: cursor hidden behind soft keyboard on initial tap #2137

vishna opened this issue Aug 22, 2024 · 5 comments
Labels
android Issues or feature requests specific to the Android platform. bug Something isn't working iOS Issues or feature requests specific to the iOS platform. moderate Issues that are important for improving functionality or user experience.

Comments

@vishna
Copy link
Collaborator

vishna commented Aug 22, 2024

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 vishna added the bug Something isn't working label Aug 22, 2024
@vishna
Copy link
Collaborator Author

vishna commented Aug 30, 2024

...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:

most likely before tho

@vishna
Copy link
Collaborator Author

vishna commented Aug 30, 2024

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

@CatHood0
Copy link
Collaborator

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

@EchoEllet
Copy link
Collaborator

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

@Zambrella
Copy link
Contributor

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

@EchoEllet EchoEllet added android Issues or feature requests specific to the Android platform. iOS Issues or feature requests specific to the iOS platform. moderate Issues that are important for improving functionality or user experience. labels Nov 25, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
android Issues or feature requests specific to the Android platform. bug Something isn't working iOS Issues or feature requests specific to the iOS platform. moderate Issues that are important for improving functionality or user experience.
Projects
None yet
Development

No branches or pull requests

4 participants