e.stopPropagation on event bubbling breaks touchTap

[alendit]

Hi,

a MWE can be found at https://github.com/alendit/react-tap-event-bubbling-issue

When I add a listener on a bubbling of a mousedown event, which stops the further propagation, touchTap events of the children stop working (HelloTapOnly in the example). click events continue to work as expected (HelloClickAndTap).

This breaks a couple of elements in the material-ui in my use case, where I want to stop event propagation to the parent elements of a control panel. In my example I use DropDownMenu.

If you comment out the line 22 in index.js everything works fine.

[stephenrs]

Hi, is any work being done on this, or is there a known workaround? This is a blocking issue for me, and I haven't yet found a way around it. The only option I seem to be left with is to stop using some of the material-ui components (such as SelectField).

[stephenrs]

Although it's not clear to me why mousedown events are getting lost under the scenario described by the OP, I used the fact that click events do reach their intended targets to hack together a solution. This has not been tested extensively, and undoubtably will fall short of an acceptable long term solution. However, it's a usable bandaid in my project, and means the material-ui components that I'm using will not need to be replaced, and my project code doesn't need to jump through any hoops.

I've modified 3 lines in the extractEvents method of the TapEvent module, to essentially translate click events into touchTap events for components that only listen for touch events. The modified lines are preceded with "SRS"...

extractEvents: function(
      topLevelType,
      targetInst,
      nativeEvent,
      nativeEventTarget
    ) {

      // SRS
      //   if (isTouch(topLevelType)) {
      if (isTouch(topLevelType) || topLevelType === topLevelTypes.topClick) {
        lastTouchEvent = now();
      } else {
        if (shouldRejectClick(lastTouchEvent, now())) {
          return null;
        }
      }

      // SRS
      //   if (!isStartish(topLevelType) && !isEndish(topLevelType)) {
      if (!isStartish(topLevelType) && !isEndish(topLevelType) && topLevelType !== topLevelTypes.topClick) {
        return null;
      }
      var event = null;
      var distance = getDistance(startCoords, nativeEvent);
      // SRS
      //   if (isEndish(topLevelType) && distance < tapMoveThreshold) {
      if ((isEndish(topLevelType) && distance < tapMoveThreshold) || topLevelType === topLevelTypes.topClick) {
        event = SyntheticUIEvent.getPooled(
          eventTypes.touchTap,
          targetInst,
          nativeEvent,
          nativeEventTarget
        );
      }

      ....

Hopefully the React and/or Material-ui teams will get something into a core update before I realize what this hack breaks...

[lmx99]

this bug still here?