Hammer swallowing child node ref

[iDVB]

Was using...

     "react-dom": "^15.4.1",
     "react-hammerjs": "^0.5.0",

...and there was no issue. Now I'm using..

    "react-dom": "^16.1.0",
    "react-hammerjs": "^1.0.1",

...and suddenly all children nodes to Hammer are being ignored.

EG. in the following code thing1 consoles but thing2 does NOT.

    return (
      <div ref={thing1 => { console.log('thing1', thing1) }}>
        <Hammer
          onPan={e => this.pan(e, theta, panelCount)}
          options={hammerOptions}
        >
          <div ref={thing2 => { console.log('thing2', thing2) }}>
            <div>{panels}</div>
          </div>
        </Hammer>
      </div>
    );

...removing Hammer completely allows thing2 to console.

[NordlingDev]

Same problem here. In the meanwhile, you can add a ref to the direct parent of the <Hammer> component and then find the right node using different HTMLElement methods like querySelector or getElementsByClassName or such.

[raulrene]

+1, hope this gets fixed. @NordlingArt 's proposed workaround is a little messy

[raulrene]

I was frustrated by this and created a PR that fixes it. Hope @JedWatson has the time to go over it.

[tc7]

+1 having the same problem here. Was working fine on v0.5.0.

Have worked around it as per NordlinArt's suggestion (add ref to parent of <Hammer>).

[adiulici]

@raulrene's fix works, but it wasn't merged yet.

It seems that only the refs for the direct child node gets swallowed, so another workaround is to have an element wrapping your content inside the Hammer element, something like:

return (
  <div ref={thing1 => { console.log('thing1', thing1) }}>
    <Hammer
      onPan={e => this.pan(e, theta, panelCount)}
      options={hammerOptions}
    >
      <div>
        <div ref={thing2 => { console.log('thing2', thing2) }}>
            <div>{panels}</div>
        </div>
      </div>
    </Hammer>
  </div>
);

Of course, this works if you don't have some strict rules regarding your HTML structure.

[Pushplaybang]

@adiulici thanks, this works, I have far stricter results about supporting multiple platforms with touch events, and having my child nodes update properly.

Cheers.

[alekseykarpenko]

@JedWatson If this project is abandoned? @raulrene's fix is still not merged...