[Dashboard][Collapsable Panels] Respond to touch events #204225
Conversation
mbondyra
added
Team:Presentation
mbondyra
force-pushed
the
collapsable_panels/touch
branch
3 times, most recently
from
a28959b to
60a0bff
Compare
mbondyra
force-pushed
the
collapsable_panels/touch
branch
from
60a0bff to
d34d868
Compare
|
|
||
| const setDragHandles = useCallback( | ||
| (dragHandles: Array<HTMLElement | null>) => { | ||
| if (gridLayoutStateManager.accessMode$.getValue() !== 'EDIT') { |
There was a problem hiding this comment.
I might be missing something here and maybe there's a reason to put it directly in the onTouchStart etc callbacks?
There was a problem hiding this comment.
So the reason I had it in the onMouseDown is that the drag handles don't always get unmounted on view mode change - specifically, when it comes to embeddables, this occurs when the panel title is acting as the drag handle. So if we don't cancel out drag events on mouse down and/or touch start, the user can drag panels around in view mode:
Screen.Recording.2024-12-18.at.1.26.45.PM.mov
|
Pinging @elastic/kibana-presentation (Team:Presentation) |
| handle.addEventListener('touchstart', onTouchStart, { passive: false }); | ||
| handle.addEventListener('touchend', onTouchEnd, { passive: true }); |
There was a problem hiding this comment.
Do we need seperate onTouchStart + onTouchEnd callbacks defined? It looks like we could modify the existing onMouseDown callback a bit and use it for the touchstart event listener too, for example? They're more-or-less doing the same thing.
We could rename them to onDragStart and onDragEnd rather than tying the name to a mouse action 🤷
| // `shouldAutoScroll` is set to false because we don't want the screen to scroll when dragging/resizing the items | ||
| calculateUserEvent(e, false); |
There was a problem hiding this comment.
Hmmm... I'm still getting some strange scrolling at times - not really sure what is causing it, but it's like the panel gets stuck 🤔
Screen.Recording.2024-12-18.at.1.35.25.PM.mov
💛 Build succeeded, but was flaky
Failed CI StepsTest FailuresMetrics [docs]
History
|
Summary
Adds support to touch events. The difference between these ones and mouse events is that once they are active, the scroll is off (just like in the current Dashboard)
touch.mp4
Fixes #202014