fleather icon indicating copy to clipboard operation
fleather copied to clipboard

Re: FleatherField cursor does not stay visible when focused/keyboard is visible

Open Lomedhi opened this issue 1 year ago • 5 comments

Opening issue for visibility to this issue #421

RE: "Hi. I also want to give you master devs @Amir-P @amantoux some well deserved props because this package is amazing from where you took it and very sufficient for my use case. I also am having the same scrolling to the viewport issue with cursor going below the keyboard.

I did some research into the matter and it seems a similar issue was reported on the original repo project https://github.com/memspace/zefyr/issues/485. https://github.com/flutter/flutter/issues/10826

From the thread, there is some proposed solution with considering the offset with and without the keyboard, but I believe this is for pack https://github.com/singerdmx/flutter-quill/pull/111.

Here is the implemented solution code.

I tried testing and debugging my own implementation (Container,Column, SingleChildScrollView,Scaffold different parent child code, expanded and/or scrollable as true/false, set and not setting maxHeight), but got the same result of a non scrolling past the scroll container but also not scrolling the cursor above the keyboard. I can leave code snippet, but if you wrap FleatherField in a Listview and then wrap listview in a Container is what the code would in essence be with other children in the listview as well."

Steps to Reproduce

  1. Build FleatherEditor/Field widget
  2. Wrap FleatherField in Listview or scrollable widget
  3. Wrap FleatherField in Container or non-scrolable widget

Environment

  • OS [iOS/Web/Android]
  • Flutter version [3.24.2]
  • Fleather version [1.9.0]

Logs

Lomedhi avatar Nov 10 '24 19:11 Lomedhi

Hi, any news about this?

manudicri avatar Feb 13 '25 14:02 manudicri

@manudicri No word on my end. I implemented a workaround with App Bar for my use case for some basic scrolling, but not in regards to FleatherEditor or FleatherField being wrapped in a Listview widget. I believe the issue is historic and was inherited from the forked package as it existed before the migration to Editable implementation.

You may have some luck with an implementation of a content padding as the editor character count increases against the height of the keyboard (MediaQuery.of(context).viewInsets.bottom).

It is pretty interesting multiple editable text widgets/packages have this issue (flutter_quill doesn’t have a proper solution for this use case Listview.builder). What gets me is a standard Textfield widget is able to scroll the entire page viewport for keeping the cursor alive when wrapped in a scrollable widget, but also has its cursor fall below the keyboard if not wrapped in a scrollable widget.

Lomedhi avatar Feb 28 '25 04:02 Lomedhi

May help https://github.com/singerdmx/flutter-quill/issues/1599

Lomedhi avatar Feb 28 '25 04:02 Lomedhi

@Lomedhi Yeah actually right now I'm using Flutter Quill and got the same issue. I'll may try to fix by forking the package (if it is possible). That would be cool just to know how to get the cursor position coordinates. I opened this #462 for the scrolling problem. Though it seems to be a different topic maybe

manudicri avatar Mar 02 '25 08:03 manudicri

@manudicri @Lomedhi thank you the analysis, we will look it this issue next

amantoux avatar Apr 26 '25 17:04 amantoux

Duplicate of #462

amantoux avatar Sep 13 '25 18:09 amantoux

@Lomedhi can you test https://github.com/fleather-editor/fleather/tree/462-fleatherfield-cursor-goes-behind-the-keyboard-when-typing and let me know how it goes?

amantoux avatar Sep 14 '25 07:09 amantoux