onSwiped not triggered in some cases

I use react-swipeable in 2 different places in my app. In the first one, it perfectly works but in the second one, onSwiped is not triggered.

I used the event listener breakpoint of Chrome inspector and when I release the button, it correctly breaks. But the internal onUp function of react-swipeable is never called.

Several things worthy to note:

• I’m 99% sure it was working a couple of version earlier (like before v6).
• When it’s not working, my swipeable component lies in a modal dialog (which is nothing else than a bunch of nested div, one of them having the position: fixed rule).
• I tried to reproduce this issue in a codesandbox but did not succeed.

Here’s how I use the hook:

const Swipeable = ({children, ...props}: SwipeablePropType) => {
  const handlers = useSwipeable(props);

  return <div className='swipeable' {...handlers}>{children}</div>;
};

Using onSwiping I set the transform CSS rule to make a div follow the mouse, then using onSwiped I actually perform an action on the div’s content.

I put console.logs into both handlers and here’s what I get when it works:

swiping
swiping
...
swiping
swiped

And when it doesn’t:

swiping
swiping
...
swiping

The swiped log actually prints when I close the modal (i.e. unmount the component).

I tested this with the latest versions of Chrome and Firefox.

[Robloche]

Hello,

First of all: thanks for taking a deeper look at my issue.

I tried event.preventDefault() but it did not work (detail view still opens when mouse button is released), plus it did not solved my main issue.

However, I had totally missed the fact that the swiping stops if the button is release outside the modal. That gives me a solid track to explore.

I’ll re-open this issue if something new occurs.

Thanks again,

[Robloche]

Thanks for having taken the time to check my issue. I’m glad you experienced it either. I really tried to build a CodePen but even with an intricate DOM structure, I couldn’t reproduce the bug…

Regarding my code, I had to write the following React component since my codebase is a little bit old and does not use React hooks:

import * as React from 'react';
import {useSwipeable} from 'react-swipeable';

type SwipeablePropType = {
  +children: React.Element<*>
};

export const Swipeable: React.ComponentType<SwipeablePropType> = ({children, ...props}: SwipeablePropType) => {
  const handlers = useSwipeable(props);

  /* eslint-disable react/jsx-props-no-spreading */
  return <div
    className='swipeable'
    {...handlers}>{children}</div>;
  /* eslint-enable react/jsx-props-no-spreading */
};

And here’s how I use it:

        <Swipeable
          onSwiped={this.handleOnSwiped}
          onSwiping={this.handleOnSwiping}
          trackMouse>
          <div
            className='sectionSlider'
            onTransitionEnd={this.handleOnTransitionEnd}
            ref={(instance) => {
              this.slider = instance;
            }}>
            {tiles}
          </div>
        </Swipeable>

handleOnSwiping = (eventData) => {
    const {deltaX} = eventData;
    const {displayType, maxPageIndex, pageIndex} = this.state;
    const {slider, sliderPositions} = this;

    if (!slider || maxPageIndex <= 0 || displayType === SECTION_DISPLAY_GRID) {
      return;
    }

    // Trick explained below
    this.setState({isSwiping: true});

    const posX = sliderPositions[pageIndex];
    const newPosX = posX + deltaX;

    slider.style.transform = `translateX(${newPosX}px) translateZ(0)`;
  };

  handleOnSwiped = (eventData) => {
    const {dir, velocity} = eventData;
    const {displayType, maxPageIndex} = this.state;

    // Trick explained below
    this.resetSwipeTimeout();
    this.swipeTimeout = setTimeout(() => this.setState({isSwiping: false}), SWIPE_COOLDOWN_TIME);

    if (maxPageIndex <= 0 || displayType === SECTION_DISPLAY_GRID) {
      return;
    }

    const pageStep = Math.ceil(velocity / PAGE_VELOCITY_STEP);

    if (dir === 'Left') {
      this.goToNextPage(pageStep);
    } else if (dir === 'Right') {
      this.goToPreviousPage(pageStep);
    }
  };

Without the isSwiping trick, releasing the button that triggers onSwiped event also triggers the opening of a tile’s detailed view (depending on where the mouse cursor ended). So I wait 10 ms (SWIPE_COOLDOWN_TIME) before allowing a click on a tile.