[EuiResizableContainer] Resizable container misbehaves when using react-reverse-portal

[davismcphee]

We're using EuiResizableContainer as part of a project to make the histogram in Discover resizable (elastic/kibana#139446). In some cases the resizable layout is swapped out with a fixed layout such as when viewing on small screens or when hiding the histogram. Typically when this happens React has to remount the child components since their parents have changed, but this causes rendering delays as the child components are pretty heavy to remount. To keep the children from remounting when the layout is swapped, we're using the react-reverse-portal library (https://github.com/httptoolkit/react-reverse-portal).

This works as intended except that EuiResizableContainer conflicts with react-reverse-portal. It seems that resizing stops working whenever the mouse leaves the resize button element while dragging:

I've created a branch in my EUI fork demonstrating the issue on the EuiResizableContainer docs page: https://github.com/davismcphee/eui/tree/resizable-reverse-portals.

[thompsongl]

Hey @davismcphee

I could be misunderstanding, but I'm not sure it has to do with react-reverse-portal.
#4931 reports that when the mouse leaves the resizer, that resizing stops. This is request that we haven't had a chance to take on yet.

[davismcphee]

@thompsongl Thanks for the quick response! It looks like the issue you linked relates to what happens when the cursor is moved outside of the EuiResizableContainer while resizing. The issue I'm experiencing is that when using react-reverse-portal the resize is cancelled when the cursor moves outside of the EuiResizableButton even though it's still within the EuiResizableContainer.

Since the button follows the cursor when resizing, moving slowly keeps the cursor above the button and things work as intended. But if you move the cursor slightly faster, the button will naturally lag a bit and the cursor will move from over top it to above the panels. This is when the resizing seems to be cancelled.

[davismcphee]

@thompsongl Looking into this further, it seems this is related to event delegation in React and is a known issue with react-reverse-portal: httptoolkit/react-reverse-portal#13. For our Discover use case I was able to work around it by monitoring for when resizing starts and ends, and toggling a transparent overlay above the panels while resizing. The overlay emits the events EuiResizableContainer is listening for and resizing works as expected.

Considering how niche this use case is, I wouldn't expect EUI to implement a similar workaround to support it, but I was wondering if it would make sense for EuiResizableContainer to implement onResizeStart and onResizeEnd callbacks to generically support these types of use cases? Currently my solution is fairly hacky using wrapping divs, etc. with their own event listeners to pull it off.

If this is something the EUI team would be open to, I'll close this issue and open a new one requesting the callbacks instead.

[thompsongl]

would make sense for EuiResizableContainer to implement onResizeStart and onResizeEnd callbacks

Ah yes I like that idea!

toggling a transparent overlay above the panels while resizing

This is an interesting idea re: #4931. Augment the UI broaden the drag area.

[davismcphee]

Ah yes I like that idea!

Great! I've created an issue for the callbacks instead (#6225), so I'll close this one now.

This is an interesting idea re: #4931. Augment the UI broaden the drag are.

Yup I think this approach would likely work for the charts use case from the issue, and something similar might be possible for extending the drag area by using an overlay with fixed positioning. I'm not sure how this would affect the event listeners though. For reference, this component includes our current workaround: https://github.com/elastic/kibana/blob/75a660174a2bee9b32ef81521331aebe0c83491a/src/plugins/discover/public/application/main/components/layout/discover_panels_resizable.tsx