AnalyticalTable: column jumps back to original size when entering prev column with cursor while resizing

[Lukas742]

Describe the bug When reducing the width of the column by dragging the resizer, the resizer jumps back to its original position when entering the area of the previous column.

Isolated Example http://localhost:6006/?path=/story/data-display-analyticaltable--default-story

https://user-images.githubusercontent.com/9749730/157475137-4391fbbc-de2e-48a3-9f0c-4ea96fc089a1.mp4

To Reproduce Steps to reproduce the behavior:

1. Go to storybook
2. Reduce the size of a column by dragging the resizer and leave the current column
3. See that the column has reset its width

Expected behavior While resizing a column and moving the resizer past its start point, the column should stay at its min-width and not jump back to its previous size.

UI5 Web Components for React Information @ui5/webcomponents-react version: 0.22.2

Additional informations:

Internally we use react-table to implement the AnalyticalTable and resizing of columns is currently handled by the useResizeColumns plugin hook. To fix this issue, a custom hook is probably necessary.

[mauroerta]

I confirm that the issue is related to useResizeColumns.

I think we can file this issue directly to react-table since there is no way to customize its behavior from outside.

Alternatively, we can think about re-creating the hook in our project and trying to fix the issue by ourselves - but I think it will still be a good idea to open an issue to react-table and, in case we also have the fix, file a PR to fix the bug for everyone.

What's your opinion about it?

[Lukas742]

I think it doesn't hurt to open an issue in the react-table repo, but as the author is probably pretty busy right now, with developing v8, it will probably take a while to fix this. (Maybe this is even the intended behavior - not sure about that though) So in my opinion we should try to implement this here, maybe it can even be fixed by hooking into getResizerProps and overwrite/extend the corresponding events there. (By using a custom plugin hook)