Percentage total of a pair is not respected while dragging if more than 2 children are passed to Splitter

[chiragA17]

Hi

Use Case

I'm using the Splitter to show multiple devices stacked next to each other in a resizable fashion. I'm passing initialSizes to the Splitter to persist the size change in case of re-renders by saving the size array obtained from onResizeFinished event handler.

Problem

If you notice in the elements tab of dev tools, whenever I start dragging a gutter the pair that is involved in the operation loses the percentage sum of that pair which results in the bouncing nature of the other panes in the splitter.

My understanding

I'm attaching a video for reference here. In this video, you'll notice that when I start dragging the first gutter before drag starts the sum of percentage for the pair is (20.98 + 28.35) 49.33%. Now, as soon as I start the drag operation the sum of the percentage of the pair goes above this value (for instance at 0:02 in the video, the values are 36.92 & 29.746 which adds up to 66.66%). Similarly, sometimes it goes below the actual sum in which case you'll notice a whitesmoke colored background after the 3rd device (which shows how the sum of the three panes is not actually 100% but much lower than that.

https://user-images.githubusercontent.com/84370073/159870556-62f40b8a-6988-4a70-ba43-85c6223685ef.mov

Although I have handled this issue when the drag ends by calculating the percentage change in one item of the pair. Although, I want to fix this flakiness while dragging.

Unfortunately, I cannot share any code snippets here but I've added a code sandbox to reproduce this. If you can suggest any possible solutions that I could implement at the earliest that would be great.

Sandbox Link: https://codesandbox.io/embed/devbookhq-spliiter-example-forked-8is0vz?fontsize=14&hidenavigation=1&theme=dark