Swipe/touch support in web components

[0x7878]

Duplicates

• I have searched the existing issues

Summary

Swipeevents / Touchevents don't work inside a web component. In SwipeableDrawer.js there is the handleBodyTouchStart handler and the condition:

 // logic for if swipe should be ignored:
 // if disableSwipeToOpen
 // if target != swipeArea, and target is not a child of paper ref
 // if is a child of paper ref, and `allowSwipeInChildren` does not allow it
 if (disableSwipeToOpen || !(nativeEvent.target === swipeAreaRef.current || (_paperRef$current = paperRef.current) != null && _paperRef$current.contains(nativeEvent.target) && (typeof allowSwipeInChildren === 'function' ? allowSwipeInChildren(nativeEvent, swipeAreaRef.current, paperRef.current) : allowSwipeInChildren))) {
     return;
 }

This prevents the drawer from opening because the native element is my web component. My local fix is this:

  const handleBodyTouchStart = useEventCallback(nativeEvent => {
    // We are not supposed to handle this touch move.
    // Example of use case: ignore the event if there is a Slider.
    if (nativeEvent.defaultPrevented) {
      return;
    }

    // We can only have one node at the time claiming ownership for handling the swipe.
    if (nativeEvent.defaultMuiPrevented) {
      return;
    }

    // At least one element clogs the drawer interaction zone.
    if (open && (hideBackdrop || !backdropRef.current.contains(nativeEvent.target)) && !paperRef.current.contains(nativeEvent.target)) {
      return;
    }
    const anchorRtl = getAnchor(theme, anchor);
    const horizontalSwipe = isHorizontal(anchor);
    const currentX = calculateCurrentX(anchorRtl, nativeEvent.touches, ownerDocument(nativeEvent.currentTarget));
    const currentY = calculateCurrentY(anchorRtl, nativeEvent.touches, ownerWindow(nativeEvent.currentTarget));
    if (!open) {
      var _paperRef$current;
      var isWebComponent = nativeEvent.target.tagName.includes('-');
      // logic for if swipe should be ignored:
      // if disableSwipeToOpen
      // if target != swipeArea, and target is not a child of paper ref
      // if is a child of paper ref, and `allowSwipeInChildren` does not allow it
      if (disableSwipeToOpen || !((nativeEvent.target === swipeAreaRef.current || isWebComponent) || (_paperRef$current = paperRef.current) != null && _paperRef$current.contains(nativeEvent.target) && (typeof allowSwipeInChildren === 'function' ? allowSwipeInChildren(nativeEvent, swipeAreaRef.current, paperRef.current) : allowSwipeInChildren))) {
        return;
      }
      if (horizontalSwipe) {
        if (currentX > swipeAreaWidth) {
          return;
        }
      } else if (currentY > swipeAreaWidth) {
        return;
      }
    }
    nativeEvent.defaultMuiPrevented = true;
    claimedSwipeInstance = null;
    swipeInstance.current.startX = currentX;
    swipeInstance.current.startY = currentY;
    startMaybeSwiping();
  });

Examples

No response

Motivation

No response

Search keywords:

[mnajdova]

Did you try using disableSwipeToOpen? Is it not sufficient?

[0x7878]

Sure I did. I also debugged it and the components are embedded in a web component because I use it inside home assistant. I currently work on that project which is available on GitHub (MealWish). Without the changes, the swipe to open does not work.

[0x7878]

Please see the images. I just double check it now.

disableSwipeToOpen=true (without my changes)

without disableSwipeToOpen but with my modifications: