Skip to content

Fix issues in scrollable pane#4055

Merged
ThomasMichon merged 6 commits intomicrosoft:masterfrom
MaxLustig:maxlus/stickyContainer
Mar 1, 2018
Merged

Fix issues in scrollable pane#4055
ThomasMichon merged 6 commits intomicrosoft:masterfrom
MaxLustig:maxlus/stickyContainer

Conversation

@MaxLustig
Copy link
Contributor

@MaxLustig MaxLustig commented Feb 21, 2018

Pull request checklist

  • Addresses an existing issue: Fixes #0000
  • Include a change request file using $ npm run change

Description of changes

It's possible to enter an infinite recursion in scrollable pane. notifySubscribers is called from _onWindowResize, which is called from forceLayoutUpdate (callable from the parent item). This calls Sticky::_onScrollEvent, which updates the Sticky's state. Sticky::componentDidUpdate can call scrollablePane.addStickyHeader, which calls _addSticky, which then calls notifySubscribers, infinitely recursing. The solution to this was to update Sticky::_onScrollEvent to not check the current of conditions of isStickyTop and isStickyBottom, since it was causing them to constantly flip, causing setState to constantly get called.

This, however, unfurled a different bug in ScrollablePane which the infinite loop had masked: the top sticky header wouldn't properly be placed in stickyAbove on creation of the ScrollablePane, but the constant changing of isStickyTop and isStickyBottom eventually caused it to snap in place. By getting rid of stickyContainer and moving stickyAbove and stickyBelow to siblings of the children of the pane, this is fixed (it also removed the need for resizeContainer).

Focus areas to test

Scrollable Pane

@dzearing
Copy link
Member

@ThomasMichon are you ok with this?

}
}, 1);
}
this.notifySubscribers();
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I think you should just move this call into the timeout.

@MaxLustig MaxLustig changed the title Fix infinite recursion in scrollable pane Fix issues in scrollable pane Feb 27, 2018
@MaxLustig MaxLustig force-pushed the maxlus/stickyContainer branch from c7c112e to 9176014 Compare February 28, 2018 00:03
@elliottsj
Copy link
Contributor

elliottsj commented Apr 19, 2018

Re-wording the description here for clarity for future reference:

It's possible to enter an infinite recursion in ScrollablePane:

     forceLayoutUpdate()
->   _onWindowResize()
-> * notifySubscribers()
->   Sticky::_onScrollEvent()
->   (React state update)
->   Sticky::componentDidUpdate()
->   scrollablePane.addStickyHeader()
->   _addSticky()
-> * notifySubscribers()
->   ...

The solution to this was to update Sticky::_onScrollEvent to not check the current of conditions of isStickyTop and isStickyBottom, since it was causing them to constantly flip, causing setState to constantly get called.

This, however, unfurled a different bug in ScrollablePane which the infinite loop had masked: the top sticky header wouldn't properly be placed in stickyAbove on creation of the ScrollablePane, but the constant changing of isStickyTop and isStickyBottom eventually caused it to snap in place. By getting rid of stickyContainer and moving stickyAbove and stickyBelow to siblings of the children of the pane, this is fixed (it also removed the need for resizeContainer).

@microsoft microsoft locked as resolved and limited conversation to collaborators Aug 31, 2019
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

4 participants