[EuiResizableContainer] Mouse drags outside of the container no longer lose dragging state #7456
Conversation
…ener - which allows the user to drag their mouse wherever they need to on the window, instead of stopping outside the container only
+ update util for touch vs mouse events to check for touch instead of mouse, and to use `targetTouches` as opposed to just `touches`
- avoids TS casting (yay!) and also uses `clientX` over `pageX` (which on further googling is probably better)
cee-chen
force-pushed
the
resizable-container-4931
branch
from
940d9d4 to
1e20797
Compare
|
Preview staging links for this PR:
|
💚 Build Succeeded
History
|
| ): event is ReactMouseEvent { | ||
| return typeof event === 'object' && 'pageX' in event && 'pageY' in event; | ||
| } | ||
| export const isTouchEvent = ( |
There was a problem hiding this comment.
This wasn't previously exported. Did you mean to add this as an export?
There was a problem hiding this comment.
I figured I might as well, although I'm happy to revert if needed! I originally grabbed this util for EuiFlyoutResizable to replace some similar/duplicated code, before realizing I could actually use the parent exported getPosition() util entirely.
That being said, I could definitely see myself using this util again in other places in EUI in the future, if needed 🤔
There was a problem hiding this comment.
I'm fine either way, I just wanted to double check.
| @@ -155,13 +156,3 @@ export const EuiFlyoutResizable = forwardRef( | |||
| } | |||
| ); | |||
| EuiFlyoutResizable.displayName = 'EuiFlyoutResizable'; | |||
|
|
|||
| const getMouseOrTouchX = ( | |||
There was a problem hiding this comment.
FWIW, our docs still have a copy of this method in use. Is getPosition exported from our package in a way that we can update our docs to use this approach as well?
There was a problem hiding this comment.
Ooo, thanks for catching this! It looks like we don't export any resizable utils, but I'm now wondering if we should. What do you think? Should we add a new public export for this, probably under src/services? Maybe src/services/drag, or src/services/touch_or_mouse? 🤷
There was a problem hiding this comment.
I'm not sure if its worth it or not. I had a suspicion people were copy/pasting this example verbatim and it might clean that up -- but I don't see any examples in Kibana where it looks like someone would have done so. I don't think we need to solve this now.
There was a problem hiding this comment.
Fair! Will leave this uncollapsed for now in case we decide to come back to this later on.
`v92.0.0-backport.0`⏩ `v92.1.1` --- ## [`v92.1.1`](https://github.com/elastic/eui/releases/v92.1.1) **Bug fixes** - Minor `EuiDataGrid` cell performance fixes ([#7465](elastic/eui#7465)) ## [`v92.1.0`](https://github.com/elastic/eui/releases/v92.1.0) - Updated `EuiResizableButton` to allow customizing the `indicator` style with either `handle` (default) or `border` ([#7455](elastic/eui#7455)) - Enhanced `EuiResizableContainer` to preserve the drag/resize event when the user's mouse leaves the parent container and re-enters ([#7456](elastic/eui#7456)) **Bug fixes** - Fixed an `EuiTreeView` JSX Typescript error ([#7452](elastic/eui#7452)) - Fixed a color console warning being generated by disabled `EuiStep`s ([#7454](elastic/eui#7454)) **Accessibility** - `EuiDataGrid`'s keyboard/screenreader experience has been tweaked to be more consistent for varying complex data: ([#7448](elastic/eui#7448)) - Headers are now always navigable by arrow key, regardless of whether the header cells contain interactive content - Non-expandable cells containing any amount of interactive content now must be entered via Enter or F2 keypress - Expandable cells continue to be toggled via Enter or F2 keypress - `EuiDataGrid` now provides a direct screen reader hint for Enter key behavior for expandable & interactive cells ([#7448](elastic/eui#7448))
`v92.0.0-backport.0`⏩ `v92.1.1` --- ## [`v92.1.1`](https://github.com/elastic/eui/releases/v92.1.1) **Bug fixes** - Minor `EuiDataGrid` cell performance fixes ([elastic#7465](elastic/eui#7465)) ## [`v92.1.0`](https://github.com/elastic/eui/releases/v92.1.0) - Updated `EuiResizableButton` to allow customizing the `indicator` style with either `handle` (default) or `border` ([elastic#7455](elastic/eui#7455)) - Enhanced `EuiResizableContainer` to preserve the drag/resize event when the user's mouse leaves the parent container and re-enters ([elastic#7456](elastic/eui#7456)) **Bug fixes** - Fixed an `EuiTreeView` JSX Typescript error ([elastic#7452](elastic/eui#7452)) - Fixed a color console warning being generated by disabled `EuiStep`s ([elastic#7454](elastic/eui#7454)) **Accessibility** - `EuiDataGrid`'s keyboard/screenreader experience has been tweaked to be more consistent for varying complex data: ([elastic#7448](elastic/eui#7448)) - Headers are now always navigable by arrow key, regardless of whether the header cells contain interactive content - Non-expandable cells containing any amount of interactive content now must be entered via Enter or F2 keypress - Expandable cells continue to be toggled via Enter or F2 keypress - `EuiDataGrid` now provides a direct screen reader hint for Enter key behavior for expandable & interactive cells ([elastic#7448](elastic/eui#7448))
Summary
closes #4931
This PR updates
EuiResizableContainerto use window event listeners formouseup/mousemove, which is also how EuiFlyoutResizable works (#7439). Event listeners are created on mousedown and removed on mouseup.The net result is that users can now drag outside resizable containers and not have their drag event abruptly ended. IMO, this provides a user experience with less friction and matches many other drag/resize experiences around the web.
QA
General checklist
- [ ] Checked in both light and dark modesand cypress tests- [ ] If applicable, added the breaking change issue label (and filled out the breaking change checklist)