Inferno: Touch events not supported?

[hguillermo]

I am migrating a code like this from a React codebase:

<div
className="discover-slider"
onTouchStart={this.onTouchStart}
onTouchMove={this.onTouchMove}
onTouchEnd={this.onTouchEnd}
>
...
</div>

Those events are working on React but they are not being fired in Inferno. Am I doing something wrong? I think it is just not supported right now. Ideas?

Thanks a lot for all your support guys!

[Havunen]

We use them and they are working just fine... Is this again old version of JSX plugin issue? Make sure you have v3+. Edit: I misread, thought it was about onMouseMove need to test this.

[deamme]

Seems like some events are missing, which also can be read here:
https://github.com/infernojs/inferno/blob/f90018a083807e03d938fe8c16e312090c84fe25/packages/inferno/README.md#event-system

[hguillermo]

@deamme you are right. @Havunen Can we add these touch events? Thanks

[trueadm]

These have worked in the past, just not via the synthetic event system. Can you try with the event name being all lowercase?

[deamme]

@trueadm Are non synthetic events created by setting the name to lowercase?

[trueadm]

@deamme all lowercase events use the native event system and bypass Inferno's system entirely.

[hguillermo]

@trueadm Oh. Let me test. I will keep you posted.

[hguillermo]

@trueadm I updated the event names to lowercase but they are not being rendered. Somehow Inferno is removing it? This is what I did:

<div
className="discover-slider"
ontouchstart={this.onTouchStart}
ontouchmove={this.onTouchMove}
ontouchend={this.onTouchEnd}
>
...
</div>

Based on what you are saying this should work. Not sure what is going on here.

[trueadm]

@hguillermo Can you show what the compiled JSX code looks like? I have a feeling you might be using an old version of the JSX plugin for Inferno.

[hguillermo]

@trueadm I am using "babel-plugin-inferno": "^3.1.0" and I just updated inferno to 1.6.1 but I am getting this error now: Inferno Error: cannot update state via setState() in componentWillUpdate() or constructor.. But I am not setting the state in the constructor or componentWillUpdate. After I fix that problem I will check again. Thanks for your help!

[hguillermo]

@trueadm Inferno is removing those events. I tested using "babel-plugin-inferno": "^3.1.0" and "inferno": "1.5.6".

Input

<div
className="discover-slider"
ontouchstart={this.onTouchStart}
ontouchmove={this.onTouchMove}
ontouchend={this.onTouchEnd}
aaaa={'aaaaaaaa'}
bbbb={'bbbbbbbb'}
>

Output

<div class="discover-slider" aaaa="aaaaaaaa" bbbb="bbbbbbbb">
...
</div>

cc @deamme

[trueadm]

Are you looking at the rendered HTML lookup? Events won't appear there, as they're added as properties to th DOM Node, rather than as attributes. You'll need to access the nodes property to find these.

[hguillermo]

oh I see. I can see those events now. They are not being fired but maybe that is an error in my code. I will debug and keep you posted. Thanks!

[hguillermo]

@trueadm I fixed it doing this:

<div
className="discover-slider"
ontouchstart={(e) => this.onTouchStart(e)}
ontouchmove={(e) => this.onTouchMove(e)}
ontouchend={(e) => this.onTouchEnd(e)}
>

From the React original code:

<div
className="discover-slider"
onTouchStart={this.onTouchStart}
onTouchMove={this.onTouchMove}
onTouchEnd={this.onTouchEnd}
>

Thanks for all your help.

[hguillermo]

I am going to close this issue. Not an inferno error. Thanks again for all your help.

[trueadm]

@hguillermo you can use camelCase too, like React – well you should be. It sounds like the issue was the fact your events weren't bound the the class. Were you using createClass before in React by any chance?

[hguillermo]

@trueadm From the react code: export default class Slider extends React.Component {

and of course in React I have this in the constructor:

this.onTouchStart = this.onTouchStart.bind(this);
this.onTouchMove = this.onTouchMove.bind(this);
this.onTouchEnd = this.onTouchEnd.bind(this);

I try that in inferno but it didn't work. I am going to try again. Maybe after many tries and errors I got confused or so.

[Havunen]

New version 3.0.2 released. Closing

[koellcode]

Hi there! Have the same problem here. We are using "nuka-carousel": "^2.0.4" and migrated from preact to infernojs recently. The problem is even there with "inferno": "^3.3.1" respectivly "inferno-compat": "^3.3.1". The mouse events seems to work, but on mobile devices the touchevents are not even registered. Is that maybe a regression or smth? or more like an inferno-compat issue?

[koellcode]

To verify, I swapped inferno-compat with preact-compat. And the touch events are properly registred in the EventListener section -.- (and working fine). Did I miss something that InfernoJS is not supported on Touch Devices? 🤔

[Havunen]

@koellcode Can you track down the issue you are having? PR would be nice :)
Also touch events should work, but I have not used them with inferno-compat

[koellcode]

@Havunen I've tried to write a failing test for it. Sadly came not that far ... will try to make a gist with inferno starter after work today

[tomlagier]

Having the same issue - touch events are not showing up as bound. Using inferno/inferno-component: ^3.9.0 and babel-plugin-inferno: ^3.2.0. Have tried with both camel and lowercased variants and I cannot get the bindings to show up.

[Havunen]

@tomlagier can you create jsFiddle to reproduce the issue please. https://jsfiddle.net/wt5vL603/

[tomlagier]

Sure: https://jsfiddle.net/97w3ounh/1/

Note that the div with all the touch handlers doesn't get any listeners bound.

[Havunen]

Seems like touch events were missing in synthetic event list... I added them there now... This is fixed in development and will be available in v4 (next weekend). From then on you don't need to use ontouchstart syntax, and its also preferred to use onTouchStart because then there will be only 1 listener bound to DOM.

[sprlwrksAprilmintacpineda]

@Havunen onTouchStart is still not on the docs?

[sprlwrksAprilmintacpineda]

it's also good if we can add onSwipe event that will allow us to detect swipe directions (left, right, top, bottom).