0

Replication Steps:

https://developer.microsoft.com/en-us/fluentui#/controls/web/scrollablepane

In the 'DetailsList Locked Header' scroll down to a non zero position exceeding the first page and enter 'sed' in the 'filter by name'. This updates the detailsList and the scrollbar does not go to the initial position.

Bug/Ask:

As we scroll down to let's say a position of 50 and now if there is an update to the details list with say suppose 350. The scrollbar is not returning to the starting position and it rerenders to a random position close to the top(in my case).

Approach/Temporary Hack:

Going through the code, I noticed that the initial scroll position of the scrollablepane is being refreshed only when the 'initialScrollPosition' props change in the implementation. I tried changing the 'initialScrollPosition' prop in my component whenever the detailList updates by setting it to either 0 or 1. Debugging this, the props for the initialScrollPosition did not change inside the ScrollablePane component did not change. This did not work and the scrollable pane is still not set to the start.

Has anyone found a workaround or a solution for this?

gottacodeemall
  • 83
  • 1
  • 9

1 Answers1

0

I Had the same issue I'm also using infinitive scroll(react-infinite-scroller) to load the data. what I finally done , was replace scrollablepane by css.

(Function handleGetNext just loading new data, and variable dataToRender I keep on the state to make concatenation between old state and new)

<div>
  {handleSelect()}
 <div style={{ overflowY: "scroll", height: 500 }} id="containers">
                <InfiniteScroll
                  pageStart={0}
                  loadMore={() => {
                    handleGetNext(overviewData.page);
                    handleSelect();
                  }}
                  hasMore={!loadingNext && !!overviewData && overviewData.page < overviewData.totalPages}
                  initialLoad={false}
                  useWindow={false}
                >
                  <ShimmeredDetailsList items={dataToRender} enableShimmer={overviewLoading} .........../>
                </InfiniteScroll> 
  </div>
 </div>

And later what is tricky you need to set scroll position, depends where you want to scroll.

const handleSelect = () => {
  const elemToScrollTo = document.getElementById("containers");
  if (!!elemToScrollTo) {
    elemToScrollTo.scrollTop = 2100;//example
  }
};
dawid debinski
  • 392
  • 4
  • 6