Hi, I've encountered an issue that is driving me crazy. I'm not sure if this is the right place to ask this because maybe this is not a material-ui problem, so forgive me if I'm doing something wrong.

When selecting an item from a SelectList on a touch device multiple events fire the onChange handler. touchend event is fired always, and sometimes mouseup fires immediately later.

The main problem is that the value passed to the handler for both events tends to be different: the first correctly receives the value of the actual selected item, but the latter gets an apparently random value (sometimes it's the same, but most of the times it's not). I've recorded a short video in order to show this (I'm using the Chrome debug tools to inspect the tab in my Android Crome):

Here is the code used in the screencap, though there is nothing special about it:

import React from 'react';
import { SelectField,   MenuItem } from 'material-ui';

export default class ProductCategorySelect extends React.Component {

    constructor() {
        super();

        this.handleChange = this.handleChange.bind(this);

        this.state = {};
    }

    handleChange(event, key, value) {
        console.log({
            type: event.type,
            key,
            value,
        });
        this.setState({ value });
    }

  render() {
    return (
        <SelectField onChange={this.handleChange} value={this.state.value}>
                {_.times(50, (iteration) => (
                    <MenuItem
                        key={iteration}
                        value={iteration}
                        primaryText={`Item ${iteration}`}
                    />
                ))}
            </SelectField>
        );
    }
}

Versions

• Material-UI: 0.15.4
• React: 15.3.1
• Browser: Chrome 53.0.2785.97
• SO: Android 6.0.1