View jumping around on enter keypress / mouseclick

[elipp]

Hey, anyone else have this issue where the view resets back to the top whenever a value is appended to an object / array using the enter key? Same seems to apply to clicking on nested objects, like nested arrays of objects etc. Anything I might be missing here?

Using the vanilla version / v0.6.2 / f61f9a1

[josdejong]

Thanks for reporting. How can I reproduce your issue? Can you create a minimal https://codesandbox.io demonstrating the issue?

It sounds like you're recreating the editor with every render or something like that.

Possibly related: #23

[elipp]

Seems like giving the targeted div element a fixed height resolves this issue, will confirm later :D

[Gregory-Ledray]

Reproduction for me in Chrome: https://codesandbox.io/s/frosty-surf-47qqdr?file=/src/components/HelloWorld.vue

Clicking on "abc" moves me to the top of the window. Double clicking lets me edit, but only if I double click very quickly.

[Edit] I added a second div and second vanilla-json with a fixed height to the targeted div element by adding a 'style' attribute but it did not fix the problem.

[Gregory-Ledray]

With a fixed height, the tree editor does not seem to scroll to the top of the screen. In fact, the editor's focus seems to stay at the correct place - I can tab around and still edit values, and the editor's scroll bar does not seem to move. However, the hosting page also has a scroll bar, and when I edit with a fixed height it is that scroll bar which moves.

I've set the height of the editor to 75vh as a workaround, although it is still jarring when I scroll a little bit too far and then edit a value and the screen jumps back up again.

[josdejong]

Ah, thanks, I can reproduce this issue, thanks for working it out and pinpointing that it has to do with the editor not having a fixed height, hence not having scrolling contents itself.