Loses styling after horizontal scroll

Question

I'm combining react-window-scroller, react-window, and react-table - I'm experiencing issues when scrolling horizontally. It seems like it loses the styling on each row. Try scrolling a bit down, and then scroll horizontally - All content disappears, now try scrolling vertically and it shows again?

URL to issue: https://codesandbox.io/s/react-window-full-height-page-scroll-7zg47?file=/src/App.js

I'm not sure what's causing this problem. If I remove the styling property on the list, in works, but then I lose the scrolling to window functionality...

Answer 1

A potential, but REALLY ugly solution is to trigger a scroll event onScroll:

const triggerScroll = () => {
  window.dispatchEvent(new CustomEvent('scroll'));
};

<VariableSizeList
                ref={ref}
                outerRef={outerRef}
                height={window.innerHeight}
                style={{...style, overflow: 'hidden'}}
                itemCount={data.length + 1}
                itemSize={() => 29}
                onScroll={triggerScroll}
                itemData={rows}
              >
                {renderRow}
              </VariableSizeList>

I dont think this is a good solution, but for now, I cant see any other way of solving this. Im hoping someone out there has a better solution for this problem? :)