[Bug]: Scroll area jumps on redraw

ittayd commented 8 months ago

CheckList

[X] I agree to follow this project's Code of Conduct
[X] I have read and followed the Contributing Guide
[X] I have read and followed the Issue Tracker Guide
[X] I have searched and referenced existing issues and discussions
[X] I am filing a BUG report.
[X] I have managed to reproduce the bug after upgrading to the latest version
[X] I have created an accurate and minimal reproduction

Version

6.0.0-beta18

In What environments are you experiencing the problem?

Chrome

Node Version (if applicable)

None

Link To Reproduction

https://jump2.tiddlyhost.com/

Steps To Reproduce

First, I assume this is a niche issue, so feel free to close if you don't want to deal with it. I tried to find the root cause and couldn't. Note this is something I hacked together to show the problem, so ignore the fact its narrow and may be unusable as a real wiki.

Go to https://jump2.tiddlyhost.com/. It is a wiki.
Click on the pencil icon to the right of the 'Example' title
It opens two panes: the left for wiki markup and the right of a preview
note the empty space below the bullets. That is a fabric canvas (with nothing since for some reason, which I didn't dwell too much, it doesn't draw well in this wiki.
below it there is a canvas of another library with a sine wave. 6 scroll down the preview a bit
type something in the editor (e.g., a space character)

Result: the preview jumps to the top.

remove the <$fabric> ... </$fabric> code and repeat 6 & 7 above

Result: no jump.

So the jump is not a result of placing a canvas (that the other library does as well)

Note that the way the wiki works is by redrawing (recreating elements) after somthing is types (with a small delay )

Expected Behavior

No jumps

Actual Behavior

Jumps

Error Message & Stack Trace

No response

ittayd commented 8 months ago

Note: this also happens if I use StaticCanvas

asturur commented 8 months ago

which editor @ittayd where do i have to type?

ittaysw commented 8 months ago

There's a pencil icon that opens an editor. It's in step 2 in the description above

asturur commented 8 months ago

Are you using a Canvas or a staticCanvas? An editable text editor? Are you linking the hiddenTextarea to the upper textbox?

ittayd commented 8 months ago

Both The text is editable, but it's not a text area. I don't understand the question.

asturur commented 8 months ago

Without seeing the code is not clear to me what is going on. If you use fabricjs editable text there is a constant focus shift on the textarea when you type that could cause the scroll up, that is why i m asking.

ittayd commented 8 months ago

There is code, if you follow my instructions you will see it. in https://jump2.tiddlyhost.com/, edit. The wiki content is the fabric code.

asturur commented 8 months ago

Is not that don't follow the instructions. this is all i can find:

ittayd commented 8 months ago

So all the code does is:

let canvas = new window.fabric.Canvas(id, options) where id is a unique identifier (not assigned to any node in the dom) and options is empty in this case
(evaluate the code in the $fabric tags, which here means nothing gets evaluated)
get canvas.wrapperEl and insert it in the DOM

asturur commented 8 months ago

Ok i understood how to see it now. It must have to do with how fabricJS attach itself to the dom. What framework is rendering that wiki? is it a react app or something else?

ittayd commented 8 months ago

The wiki is the framework. For example, as mentioned, it attaches the canvas wrapperEl element to the DOM. Note that I believe the canvas is detached until the widget (that's the thing that implements the handling for $fabric) attaches it (third bullet above)

fabricjs / fabric.js