Problem when text takes up more space than the ZefyrField height #171

mbenci · 2019-09-18T07:12:37Z

In your example of a ZefyrField in a form, I set a height of 100.
If I write a lot of text I exceed this height, from the moment that the text takes up more space than 100, then every time I type a char the text in ZefyrField "jump". It seems like it scrolls from beginning to the end very quickly.

N.B. The problem is only when a single paragraph is higher than 100.
If I use a new line before to reach the limit, there is no problem.

In form.dart i set:

return ZefyrTheme(
data: theme,
child: ZefyrField(
height: 100.0,
decoration: InputDecoration(labelText: 'Description'),
controller: _controller,
focusNode: _focusNode,
autofocus: true,
imageDelegate: CustomImageDelegate(),
physics: ClampingScrollPhysics(),
),
);

Logs

None logs, it's only a graphics effect.

[✓] Flutter (Channel stable, v1.9.1+hotfix.2, on Mac OS X 10.14.6 18G87, locale it-IT)
• Flutter version 1.9.1+hotfix.2 at /Users/marcobencivenni/flutter
• Framework revision 2d2a1ffec9 (11 days ago), 2019-09-06 18:39:49 -0700
• Engine revision b863200c37
• Dart version 2.5.0

[✓] Android toolchain - develop for Android devices (Android SDK version 28.0.3)
• Android SDK at /Users/marcobencivenni/Library/Android/sdk
• Android NDK location not configured (optional; useful for native profiling support)
• Platform android-29, build-tools 28.0.3
• Java binary at: /Applications/Android Studio.app/Contents/jre/jdk/Contents/Home/bin/java
• Java version OpenJDK Runtime Environment (build 1.8.0_202-release-1483-b49-5587405)
• All Android licenses accepted.

[✓] Xcode - develop for iOS and macOS (Xcode 10.3)
• Xcode at /Applications/Xcode.app/Contents/Developer
• Xcode 10.3, Build version 10G8
• CocoaPods version 1.7.5

[✓] Android Studio (version 3.5)
• Android Studio at /Applications/Android Studio.app/Contents
• Flutter plugin version 39.0.3
• Dart plugin version 191.8423
• Java version OpenJDK Runtime Environment (build 1.8.0_202-release-1483-b49-5587405)

[✓] IntelliJ IDEA Community Edition (version 2019.2.2)
• IntelliJ at /Applications/IntelliJ IDEA CE.app
• Flutter plugin version 39.0.5
• Dart plugin version 192.6603.23

[✓] VS Code (version 1.37.1)
• VS Code at /Applications/Visual Studio Code.app/Contents
• Flutter extension version 3.4.1

[!] Connected device
! No devices available

SiyrisSoul · 2019-10-21T22:37:38Z

I have this issue as well

mikeesouth · 2020-01-16T09:20:13Z

And me too. Have anyone found a fix or workaround (except breaking into more paragraphs)? I'm happy to submit a PR if I can find a fix but I haven't found what is causing this behavior.

raj457036 · 2020-03-18T07:14:59Z

It is caused because of scroll controller's animateTo method everytime the maxScrollExtent is greater than offset.

To solve this i had to expose the scroll controller from editableText to zefyr editor and then managing scroll manually...

Skquark · 2020-03-18T10:59:57Z

That's great, thanks Raj for tackling that problem, looking forward to updating on my projects. Let us know when the fix is pushed, or which fork it's in. I'm currenly using fork from masewo because it fixed the minor breaks with the current Flutter dev & master channels..

mxismean · 2020-04-14T08:04:28Z

I hope you can send out the modified code, which can help many people to solve this problem。Thank you very much @raj457036

mbenci · 2020-05-15T14:15:21Z

It is caused because of scroll controller's animateTo method everytime the maxScrollExtent is greater than offset.

To solve this i had to expose the scroll controller from editableText to zefyr editor and then managing scroll manually...

Thanks @raj457036 but I can't understand your changes.
Do you have an example?
Do your changes work also when the space for editing is limited like in a form?

raj457036 · 2020-05-16T05:46:01Z

My apologies for not replying as i was quite busy with work...
Will add a solution snippet asap

raj457036 · 2020-05-18T09:12:44Z

Steps to solve this problem...

step 1: Expose ScrollController to ZefyrEditor

ScrollController _viewScrollController;
double scrollOffset = 0.0;

@override
void initState() {
    _viewScrollController = ScrollController()..addListener(scrollManager);
   // attach this controller to ZefyrEditor
}

step 2: Add your own scroll controller to the ZefyrEditor

...
 ZefyrScaffold(
  child: ZefyrTheme(
    data: getTheme(context, 0),
    child: Scrollbar(
      child: ZefyrEditor(
       ...
        controller: _controller,
        scrollController: _viewScrollController, // <------------this one
      ),
    ),
  ),
);
...

step 3: Add a listener to the scrollController with below method

void scrollManager() {
    final scrollDirection = _viewScrollController.position.userScrollDirection;
    final currentOffset = _viewScrollController.offset;
    final maxOffset = _viewScrollController.position.maxScrollExtent;

    if (scrollDirection == ScrollDirection.idle &&
        _controller.selection.isCollapsed) {
      if (_isAtEnd()) {
        _viewScrollController.jumpTo(maxOffset);
      } else {
        _viewScrollController.jumpTo(scrollOffset);
      }
    } else {
      scrollOffset = currentOffset;
    }
  }

done!

Problems it will solve:

issue Problem when text takes up more space than the ZefyrField height #171 Shaking of the editor when the text fills the visible space.
issue Focus Error #111 Sometimes when we scroll to the bottom and click on some text it jumps to top.

Skquark · 2020-05-19T01:48:08Z

Thanks for that, we were hoping for a solution within the plugin rather than within our code implementation, but this looks like a good start/workaround. However, could use a little more clarification on your code..
For one, how do we expose scrollController in ZefyrEditor? Might want a fork of masewo's fork with that part. Also in your scrollManager function, we don't have the code snippet for _isAtEnd() and the scrollOffset variable. I tried to work it in, but couldn't figure out the missing pieces on my own. Thanks Raj..

…en typing long Described in memspace#171 Solution by raj457036 Haven't tested yet, not sure about the isAtEnd logic...

Skquark · 2020-05-19T08:40:52Z

Decided to help integrate your scrollManager solution into editable_text.dart to see if it works there, seemed more fun than changing every instance I used ZefyrEditor. I adapted your external method to match the projects' syntax, but I'm still not sure about the test for your isAtEnd function. I guessed it to be scrollOffset >= maxOffset but could use confirmation, haven't tried it yet.
Here's my changes: Skquark@b3c6f29
Hope it works, any feedback?

raj457036 · 2020-05-19T09:47:16Z

my apologies I didn't notice that.

isAtEnd is a method that tells if the active cursor is at the end of the document.

bool _isAtEnd() {
    return _controller.document.length - 1 == _controller.selection.end;
}

This solves issue #111

raj457036 · 2020-05-19T10:00:42Z

Decided to help integrate your scrollManager solution into editable_text.dart to see if it works there, seemed more fun than changing every instance I used ZefyrEditor. I adapted your external method to match the projects' syntax, but I'm still not sure about the test for your isAtEnd function. I guessed it to be scrollOffset >= maxOffset but could use confirmation, haven't tried it yet.
Here's my changes: Skquark@b3c6f29
Hope it works, any feedback?

😊 Happy to help!!!

Skquark · 2020-05-20T12:59:11Z

Might be workin now, had to fiddle around with it but so far so good. From my tests it looks like the scroll position is stable when typing longer than the space. Here's my fork if anybody annoyed with the bug wants to try it out:

  zefyr:
    git:
      url: https://github.com/Skquark/zefyr.git
      path: packages/zefyr/

I welcome anyone to take this fix and run with it, or to make any tweaks to the solution before submitting.. One less glitch to worry about though.

cgestes · 2020-05-22T20:47:58Z

Please submit a PR :) see #306 :)

…

On Wed, May 20, 2020 at 2:59 PM Alan Bedian ***@***.***> wrote: Might be workin now, had to fiddle around with it but so far so good. From my tests it looks like the scroll position is stable when typing longer than the space. Here's my fork if anybody annoyed with the bug wants to try it out: zefyr: git: url: https://github.com/Skquark/zefyr.git path: packages/zefyr/ I noticed there's a lot of pending pull requests in the official package that hasn't been accepted, so if I do a PR I don't know how long before it's public update, but I welcome anyone to take this fix and run with it, or to make any tweaks to the solution before submitting.. One less glitch to worry about though. — You are receiving this because you are subscribed to this thread. Reply to this email directly, view it on GitHub <#171 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AAAL75JWTUTGEEYFTHC5RRTRSPH25ANCNFSM4IX2N6UQ> .

To replace my original PR memspace#315 I forked from the wrong fork, and wanted to simplify commits to one, and fix the Travis CL build failure it was reporting. Issue discussed here memspace#171

…en typing long Described in memspace#171 Solution by raj457036 Haven't tested yet, not sure about the isAtEnd logic...

tiwariritesh1700 · 2020-08-21T05:53:35Z

Can I get Complete code Of this zephyr editor as u mentioned @Skquark .
I want the same features.

Skquark · 2020-08-22T13:19:11Z

You can see the complete code in my commit, the changes are all there, wasn't too much. You can also just use my fork if you wanted, the ref is above. I just brought it up to date with the main, works well for me but I guess I was waiting for someone else to confirm test before I submitted a PR..

sharansingh00002 · 2020-08-28T10:18:24Z

@Skquark There is a small issue, the jumping text issue is resolved but now when I try to copy something or paste something the popup does not show up just above the text but way up or way down, its like the position for the "select copy paste popup" also needs to be somehow attached with the scroll listener.

pulyaevskiy · 2020-09-30T04:15:24Z

This is fixed in the 1.0-dev branch, please see #409 for details about 1.0.
Closing this and will update when the first dev release of 1.0 is out.

pulyaevskiy added the bug Something isn't working label Sep 18, 2019

raj457036 mentioned this issue Mar 18, 2020

Focus Error #111

Closed

Skquark added a commit to Skquark/zefyr that referenced this issue May 19, 2020

Adding scrollController listener to fix bug of scroller jumping up wh…

b3c6f29

…en typing long Described in memspace#171 Solution by raj457036 Haven't tested yet, not sure about the isAtEnd logic...

Skquark mentioned this issue May 23, 2020

Fixed scroll jumping up when typing past field height #315

Closed

Skquark mentioned this issue May 24, 2020

Fixed Scroll jumping up when typing past field height #316

Open

drmirk pushed a commit to drmirk/zefyr that referenced this issue Jul 2, 2020

Adding scrollController listener to fix bug of scroller jumping up wh…

479fb1a

…en typing long Described in memspace#171 Solution by raj457036 Haven't tested yet, not sure about the isAtEnd logic...

pulyaevskiy added the 1.0 label Sep 30, 2020

pulyaevskiy closed this as completed Sep 30, 2020

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Problem when text takes up more space than the ZefyrField height #171

Problem when text takes up more space than the ZefyrField height #171

mbenci commented Sep 18, 2019 •

edited

Loading

SiyrisSoul commented Oct 21, 2019

mikeesouth commented Jan 16, 2020

raj457036 commented Mar 18, 2020 •

edited

Loading

Skquark commented Mar 18, 2020

mxismean commented Apr 14, 2020

mbenci commented May 15, 2020

raj457036 commented May 16, 2020

raj457036 commented May 18, 2020 •

edited

Loading

Skquark commented May 19, 2020

Skquark commented May 19, 2020

raj457036 commented May 19, 2020

raj457036 commented May 19, 2020

Skquark commented May 20, 2020 •

edited

Loading

cgestes commented May 22, 2020 via email

tiwariritesh1700 commented Aug 21, 2020

Skquark commented Aug 22, 2020

sharansingh00002 commented Aug 28, 2020 •

edited

Loading

pulyaevskiy commented Sep 30, 2020

Problem when text takes up more space than the ZefyrField height #171

Problem when text takes up more space than the ZefyrField height #171

Comments

mbenci commented Sep 18, 2019 • edited Loading

Logs

SiyrisSoul commented Oct 21, 2019

mikeesouth commented Jan 16, 2020

raj457036 commented Mar 18, 2020 • edited Loading

Skquark commented Mar 18, 2020

mxismean commented Apr 14, 2020

mbenci commented May 15, 2020

raj457036 commented May 16, 2020

raj457036 commented May 18, 2020 • edited Loading

Steps to solve this problem...

Skquark commented May 19, 2020

Skquark commented May 19, 2020

raj457036 commented May 19, 2020

raj457036 commented May 19, 2020

Skquark commented May 20, 2020 • edited Loading

cgestes commented May 22, 2020 via email

tiwariritesh1700 commented Aug 21, 2020

Skquark commented Aug 22, 2020

sharansingh00002 commented Aug 28, 2020 • edited Loading

pulyaevskiy commented Sep 30, 2020

mbenci commented Sep 18, 2019 •

edited

Loading

raj457036 commented Mar 18, 2020 •

edited

Loading

raj457036 commented May 18, 2020 •

edited

Loading

Skquark commented May 20, 2020 •

edited

Loading

sharansingh00002 commented Aug 28, 2020 •

edited

Loading