fix: Fire Touch end on unmount

src/components/Touch/Touch.test.tsx

@@ -8,14 +8,14 @@ import { createElement } from 'react';
 // Настоящего Touch нет в jsdom: https://github.com/jsdom/jsdom/issues/1508
 const asClientPos = ([clientX = 0, clientY = 0] = []): Touch & MouseEvent => ({ clientX, clientY }) as any;
 
-function fireMouseSwipe(e: HTMLElement, [start, ...move]: any[], ops: { startEl?: HTMLElement } = {}) {
+function fireMouseSwipe(e: HTMLElement, [start, ...move]: any[], ops: { startEl?: HTMLElement; end?: boolean } = {}) {
   fireEvent.mouseDown(ops.startEl || e, asClientPos(start));
   move.forEach((p) => fireEvent.mouseMove(e, asClientPos(p)));
   fireEvent.mouseUp(e, asClientPos(move[move.length - 1]));
   return fireEvent.click(e, asClientPos(move[move.length - 1]));
 }
 
-function fireTouchSwipe(e: HTMLElement, [start, ...move]: any[]) {
+function fireTouchSwipe(e: HTMLElement, [start, ...move]: any[], { end = true } = {}) {
   let prevTouches: number[][] = [];
   const eventProps = (p: any) => {
     const touches: number[][] = Array.isArray(p[0]) ? p : [p];
@@ -30,7 +30,7 @@ function fireTouchSwipe(e: HTMLElement, [start, ...move]: any[]) {
   };
   fireEvent.touchStart(e, eventProps(start));
   move.forEach((p) => fireEvent.touchMove(e, eventProps(p)));
-  fireEvent.touchEnd(e, eventProps([]));
+  end && fireEvent.touchEnd(e, eventProps([]));
 };
 
 const threshold = 10;
@@ -139,6 +139,13 @@ describe('Touch', () => {
           isSlideX: false,
         }));
       });
+      it('calls onEnd when unmounting', () => {
+        const handlers = makeHandlers();
+        const h = render(<Touch {...handlers} data-testid="__t__" />);
+        fireGesture(screen.getByTestId('__t__'), [[20, 20], [20, 30]], { end: false });
+        h.unmount();
+        expect(handlers.onEnd).toBeCalledTimes(1);
+      });
       if (input === 'touch') {
         it('stops gesture if multitouch', () => {
           const handlers = makeHandlers();

src/components/Touch/Touch.tsx

@@ -79,6 +79,8 @@ export const Touch: React.FC<TouchProps> = ({
 }: TouchProps) => {
   const { document } = useDOM();
   const events = React.useMemo(getSupportedEvents, []);
+  // Save last event to trigger end* on unmount
+  const lastEvent = React.useRef<VKUITouchEvent>();
   const didSlide = React.useRef(false);
   const gesture = React.useRef<Partial<Gesture>>({});
   const handle = (e: VKUITouchEvent, handers: TouchEventHandler[]) => {
@@ -92,6 +94,7 @@ export const Touch: React.FC<TouchProps> = ({
   const enterHandler = useEventListener(usePointerHover ? 'pointerenter' : 'mouseenter', onEnter);
   const leaveHandler = useEventListener(usePointerHover ? 'pointerleave' : 'mouseleave', onLeave);
   const startHandler = useEventListener(events[0], (e: VKUITouchEvent) => {
+    lastEvent.current = e;
     gesture.current = {
       startX: coordX(e),
       startY: coordY(e),
@@ -112,7 +115,14 @@ export const Touch: React.FC<TouchProps> = ({
     touchEnabled() && subscribe(el);
   }, [Component]);
 
+  useIsomorphicLayoutEffect(() => () => {
+    if (gesture.current.isPressed) {
+      onEnd(lastEvent.current);
+    }
+  }, []);
+
   function onMove(e: VKUITouchEvent) {
+    lastEvent.current = e;
     const { isPressed, isX, isY, startX, startY } = gesture.current;
 
     if (isPressed) {
@@ -167,6 +177,7 @@ export const Touch: React.FC<TouchProps> = ({
 
     didSlide.current = isSlide;
     gesture.current = {};
+    lastEvent.current = null;
 
     // Если это был тач-евент, симулируем отмену hover
     if (e.type === 'touchend' || e.type === 'touchcancel') {