[Table] Last overflow menu can crash React

[joannecl]

What package is this for?

• [x] React
• [ ] Angular

Describe the bug

When the last row of a non-paginated table is right at the bottom of the browser, I think the overflow menu gets into an infinite loop trying to reposition itself.

To Reproduce

It's a tricky one to provide code to reproduce. It seems to be just a regular table with no pagination & an overflow menu on each row. If the last row is close to the bottom of the browser, react will crash with the below message:

Maximum update depth exceeded. This can happen when a component repeatedly calls setState inside componentWillUpdate or componentDidUpdate. React limits the number of nested updates to prevent infinite loops.

After a look at the code & some debugging in the browser, it looks like it keeps calling usePopoverPositioning.fixOverflow.

I could fix this in our product by just giving it a bit of room at the bottom for the overflow menu to fit for the last row.

Expected behaviour

I would expect the overflow menu to appear above the ellipses when there is no room below.

Environment/versions:

• OS: MacOS
• Browser: chrome
• carbon-addons-iot-react version: 2.149.0-next.17