Material-ui: [FlatButton] - onTouchTap event works instead of onTouchStart

[keemor]

onTouchTap event works instead of onTouchStart as described

In current docs it's said that _onTouchStart_ is triggered. But actually _onTouchTap_ is working as in drawer example

In current source of FlatButton.js there's:
/** @ignore */
onTouchStart: PropTypes.func,

So I'm confused what is the plan, and how docs should be aligned.

Steps to reproduce

import React from 'react';
import FlatButton from 'material-ui/FlatButton';

const onTouchTap = () => alert('Primary onTouchTap event fired')
const onTouchStart = () => alert('Secondary onTouchTap event not fired')

const FlatButtonExampleSimple = () => (
<div>
<FlatButton label="Default" />
<FlatButton label="Primary" primary={true} onTouchTap={onTouchTap}/>
<FlatButton label="Secondary" secondary={true} onTouchStart={onTouchStart} />
<FlatButton label="Disabled" disabled={true} />
</div>
);
export default FlatButtonExampleSimple;

[aahan96]

@keemor Which version of MUI are you using?

[tathagatbanerjee]

Can confirm - onTouchStart does not work. onClick and onTouchTap work fine. Using MUI 0.15.1.

[aahan96]

@keemor @tathagatbanerjee I see what you are saying! Let me have a look at it and get back to you. Thank you for noticing the problem 😄

[aahan96]

@keemor @tathagatbanerjee For React touch events you have to call an intializer. Check this link out: https://stackoverflow.com/questions/22059151/whats-the-proper-way-of-binding-touchstart-on-react-js
Does it make sense?

[mbrookes]

4433

[keemor]

@aahan96 But last comment on stackoverflow says:
"Since React v0.14, you don't have to call React.initializeTouchEvents(true); manually anymore."

So how should I make onTouchStart work right now?

[jampy]

any news on this? having the same problem with FloatingActionButton...

React.initializeTouchEvents has been removed from React, see https://facebook.github.io/react/blog/2015/10/07/react-v0.14.html#breaking-changes

[jampy]

I had a quick look at the code and it seems to me that FloatingActionButton itself is not receiving the onTouchStart.

The code should set touch on touch start, but does not.

See this screen recording of React state:

• The first reaction is on my touch start. Only hovered gets set, which is probably because handleMouseEnter is fired. Note that this handler tries to avoid hover on mobile (touch===true) but that doesn't work since touch is not set. With other words, we get "undesired" hover effect on mobile (just FYI, not a problem for me).

I guess zDepth gets increased in handleMouseDown (but would be the job of onTouchStart.

• The second reaction is on my touch end. Apparently handleTouchEnd gets fired (as opposed to handleTouchStart) and now sets touch=true.

So probably there is some fundamental problem with EnhancedButton, but I'm not that familiar with the MUI code.. Help please... :-)

[ghost]

Issue
I just started using <IconButton> for my <AppBar> so that I can provide a custom icon, instead of the default hamburger. After doing that I get Uncaught TypeError: _this.props.onTouchStart is not a function in my console; however, the button still works as expected.

Repo
It doesn't happen all the time, but enough to be noticeable. Sometimes It'll be on the first click, sometimes I'll happen after waiting a little while before clicking on the IconButton

Code

<AppBar
  title={pageName}
  iconElementLeft={<IconButton><BackIcon /></IconButton>}
  onLeftIconButtonTouchTap={this.props.onToggleDrawer}
/>

[ghost]

Looks like it was fixed in 0.16.7 (15 Jan 2017)

[ghost]

This is still occurring, even after updating to 0.16.7.