I'building a simple stateless component using the <select> tag.

The onChange event is not being called every time I select an option. Once in a while it is called (after a random number of item selects).

class TestList extends Component {

    handleSelectListChange = event => {
        console.log("CLICKED " + event.target.value);
    };

    getList = () => {
        let options = [];
        for (let i = 0; i < 10; i++) {
            options.push(<option key={i} value={i}>{"ITEM " + i}</option>);
        }

        return (
            <select size={20} onChange={this.handleSelectListChange}>
                {options}
            </select>
        );
    };

    render = () => {
        let list = this.getList();

        return (
            <div>{list}</div>
        );
    };
}

export default TestList;

Why does my onChange is not being fired on every item click ?