search

josdejong / svelte-jsoneditor

A web-based tool to view, edit, format, repair, query, transform, and validate JSON
https://jsoneditoronline.org
Other
820 stars 108 forks source link

Safari Scrolls to Top on Focus #238

Closed nick-bigger closed 1 year ago

nick-bigger commented 1 year ago

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:

jsonEditor

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

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 commented 1 year ago

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 commented 1 year ago

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 commented 1 year ago

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

nick-bigger commented 1 year ago

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

josdejong commented 1 year ago

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 😄