Horizontal scrolling in nested component not working as expected

• I have searched the issues of this repository and believe that this is not a duplicate.
• It might however be related to issue #33.

When putting a nested component with horizontal scrolling inside a swipeable view it is not scrollable when additionally nested in an element with overflow: hidden.

Expected Behavior

Scrolling in the nested element and swiping should both normally work

Current Behavior

Horizontally scrolling in the nested component does not work at all while the swiping between slides remains working as expected.

Steps to Reproduce (for bugs)

https://codesandbox.io/s/m7npp2rz78 And demo here: https://m7npp2rz78.codesandbox.io/

1. Open dev tools and simulate a mobile device using the device selection toolbar
2. swipe between separate slides (works as expected) [/]
3. try scrolling horizontally in the long text in the first line of the first slide => [x] does not work

Also:

1. Remove the overflow: hidden style from the component wrapping the text (id = overflowWrapper)
2. Both swiping and scrolling work as expected again

Context

I have navigation entries on a page (i.e. a slide in the swipeable) that can grow wide. They usually fit horizontally on a page but might be cut off for narrow screen devices like an iPhone 5. Therefore I have them scrolling (I use overflow: 'auto') when they are wider than the screen so they remain accessible.

Your Environment

Tested with Chrome (63.0.3239.108 64bit) on Linux and macOS

I’ll happily provide more info if any is needed.

[ephys]

I can’t understand why SwipeableViews is receiving the event since the stopPropagation for me means a real stop propagation.

I have the same issue. I think it’s because react-swipeable-views uses the native DOM event handlers instead of react’s synthetic events.

My solution was to do the same:

class MyComponentWhichMustBlockTouchEventsSoItsContentIsScrollableAgain extends React.Component {
  container = React.createRef();

  componentDidMount() {
    const containerNode = this.container.current;

    if (!containerNode) {
      return;
    }

    containerNode.addEventListener('touchstart', this.isolateTouch, { passive: true });
    containerNode.addEventListener('touchmove', this.isolateTouch, { passive: true });
    containerNode.addEventListener('touchend', this.isolateTouch, { passive: true });
  }

  componentWillUnmount() {
    const containerNode = this.container.current;

    if (!containerNode) {
      return;
    }

    containerNode.removeEventListener('touchstart', this.isolateTouch, { passive: true });
    containerNode.removeEventListener('touchmove', this.isolateTouch, { passive: true });
    containerNode.removeEventListener('touchend', this.isolateTouch, { passive: true });
  }

  isolateTouch(e) {
    e.stopPropagation();
  }

  render() {
    return (
      <div ref={this.container}>
        {this.props.children}
      </div>
    );
  }
}

[vanhoutenbos]

The Answer is above 😃 Thank you Ephys!