MultiGrid: extra row/column to fit scrollbar must be added if the opposite scrollbar exists

[jeron-diovis]

Check out this fiddle, please: https://codesandbox.io/s/0om24qx99w

Under option happy-path is a reduced copy of your official MultiGrid demo. In this example both total rows height and total columns width exceeds height/width of grid, so both scrollbars are visible and extra row/column is added to align content:

---

Under option width there is a case when total columns width is equal to grid width, and total rows height exceeds grid height. In this case Grid thinks that horizontal scrollbar should not be displayed (accordingly to [1], [2]), and so extra column is not added ([3], [4]).

But vertical scroll exists, and it takes some space inside grid. So in fact grid width becomes a bit less than total columns width, and horizontal scroll still appears – while being not compensated by extra column:

---

All the same is vice versa for height option:

---

I managed to patch this problem in my project, but via very bad hack with updating state of a child by it's parent, intruding in child's internal logic.

It looks like Grid logic should be updated, so if one scrollbar is present, second one must be considered present too.

[mikkelwf]

Same issue here.. :/

[casvil]

@bvaughn

1 fixed row with visible scrollbar. is it possible to fix? thx

[akhilaudable]

Any improvements on this issue?

[jesus4497]

For anyone facing this issue, a potential solution would be to calculate the scrollbar size with the prop onScrollbarPresenceChange, for instance:

onScrollbarPresenceChange={({vertical, size}) => {
                if (vertical) {
                  setScrollBarWidth(size);
                } else {
                  setScrollBarWidth(0);
                }
              }}

And finally in the columnWidth prop, subtract this value to the columns width! Hope it helps