aleph
aleph copied to clipboard
Do not reset schema select scroll position on rerender
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.