Safari Scrolls to Top on Focus

[nick-bigger]

When clicking on the JSON Editor near the end of a long JSON document, the browser force scrolls back to the top of the input requiring scrolling back down. I've managed to reproduce this in the Codesandbox for the React and Vue implementations:

To Reproduce:
I have created a fork of the linked React implementation just to add in a long example JSON, but you can reproduce this in the original linked React implementation as well if you'd like (you just need to add in enough JSON to need to scroll).

1. Open https://codesandbox.io/s/svelte-jsoneditor-react-forked-ghipor?file=/src/App.js:301-7438
2. Scroll to bottom of JSON Editor
3. Click on any structure
4. Observe browser force scrolled to the top

Additional Details

• After this happens once, it doesn't happen until the page is refreshed.
• This only seems to occur in Safari on Desktop (I've tested and can't repro in Chrome or Safari for iOS)

_{^{Thank you so much ! We love this library and are hoping for a fix for this as we use it for JSON inputs all over our application.}}

[josdejong]

Thanks for reporting. The editor has a hidden input field which is used to capture quick keys like arrows to navigate through the contents of the editor. When you click somewhere inside the editor, this input field is given focus. This input field has a class name jse-hidden-input-label, and it is styled with position: fixed, right: 0; top: 0; width: 0; height: 0;.

Anyone able to debug why Safari scrolls to top when giving this element focus and find a way to prevent Safari from scrolling up? (Chrome and Firefox do not do that).

[nick-bigger]

hi there ! just bumping this as it has been few months with no movement - this causes us daily issues and we haven't found any work around :(

[josdejong]

I think I have fixed this via 20129f8. Apparently Safari does do something special to the hidden input field when it has a width and height of zero 🤔 .

[nick-bigger]

Thank you so much ! I can't wait to test 😁 we really appreciate all of your hard work on this awesome package

[josdejong]

Fixed now in v0.17.2

Thank you so much ! I can't wait to test 😁 we really appreciate all of your hard work on this awesome package

Thanks! You're welcome. If the project is so important to you, please consider sponsoring me to ensure I can keep maintaining and improving the library 😄