aleph icon indicating copy to clipboard operation
aleph copied to clipboard

Do not reset schema select scroll position on rerender

Open tillprochaska opened this issue 2 years ago • 0 comments

This PR is based on #2478 as it includes changes to components in react-ftm. Merge #2478 first, then change the PR target to develop.


Fixes #2415. Previously, the scroll position of the dropdown would reset on every rerender (even if the options had not changed).

Rerenders happen in regular intervals, because we update the collection in regular intervals (every 30 seconds and even every 3 seconds if the collection is currently being indexed). As a consequence, the it is basically impossible to select an option somewhere down the list while the collection is being indexed.

You can observe the behavior in the video below. At the same time the API request appears in the developer tools, the scroll position resets.

https://user-images.githubusercontent.com/1512805/186433833-16227511-97a7-41ff-af1e-55a88eecd325.mp4

This happen because Blueprint’s Select2 component will try to scroll the active option into view every time the component rerenders. If no option is selected, it tries to scroll the first option into view.

Setting the scrollToActiveItem property to false solves this. (This doesn’t disable the behavior completely, it will still scroll the active option into view as a result of direct user interaction, e.g. when the user uses arrow keys to select options.)

https://blueprintjs.com/docs/#select/select2


In order to verify the fix:

  • Navigate to an investigation.
  • Open the network tab in your browser’s developer tools.
  • Click on the "Add new entity type" button in the sidebar.
  • Scroll down in the list of options.
  • Wait until you see new requests to the collections API endpoint appearing in the dev tools.
  • The scroll position should not have changed.

tillprochaska avatar Aug 24 '22 09:08 tillprochaska