[IconButton] Wield IconButton OnTouchTap behavior: auto navigates to url?

[liyichao]

this is a test page:

var React = require('react');

var mui = require('material-ui');

var TestTouchTap = React.createClass({
    render: function() {
        return (

            <div className='mui-app-content-canvas'>
                <mui.Dialog ref='helpDialog' title='How to debug'>
                    1. restart the computer
                </mui.Dialog>
                <mui.Paper>
                    <form>
                        <mui.IconButton iconClassName='icon-action-black icon-action-black-ic_help_black_24dp' onTouchTap={this.handleHelp}/>
                    </form>
                </mui.Paper>
            </div>
        );
    },
    handleHelp: function(e) {
        e.preventDefault();
        console.log("handleHelp");
        this.refs.helpDialog.show();
    },
});

module.exports = TestTouchTap;

Modify the iconClassName as needed.

Assume the page has url localhost:8000/test. When I click the button, the dialog shows, then immediately it auto navigates to localhost:8000/test? and in the console there is a log Navigated to http://localhost:8000/test?, and the dialog disappears.

When I change the event to onClick, the dialog holds as expected and there is no auto navigation.

[pomerantsev]

It probably has something to do with #366.

[hai-cea]

@liyichao Did you try setting the IconButton type to "button" ?

[alitaheri]

@oliviertassinari I think changing the enhanced button to render span has fixed this. What do you think? I can't reproduce 😁

[oliviertassinari]

I have no idea. I would just close this issue 😁.

[alitaheri]

Well feel free to reopen, if it persists 😁