React html select tag not allowing unselected value

Question

I've create a new component in React that contains a <select> tag. As I want it displayed as a list, not a dropdown, I've set it's size to 10. It is being rendered as expected and I have set it's value property to a state.value property as below.

render() {
    return (
        <select className="list" size="10" value={this.state.value} onChange={this.handleChange} >
        { this.props.paraList.map(i => 
            <option key={i.ID} value={i.ID} onDoubleClick={this.handleDblClick}>{i.Text}</option>
        )}
        </select>
    );
}

However, when the user doubleclick an item in the list, I remove that item. In the this.handleDblClick method I am setting the state.value to 0, but the first item in the list appears as selected. If I check the state.value property, it is correctly assigned to 0, and the select also has it's value as 0. But the appearance of the first item being selected stays there. I have also tried setting the value to whitespace, null, -1, nothing works. Here is how the list appears for the user after a value is set to 0 (or null, or whitespace, or -1):

First item is not really selected here

The most annoying thing here is that, if the user wants to select the first item when the list is in this situation, they have to select another item and then click back on the first item. Is there a way to not having any item selected in this list at one time?

Answer 1

I believe I found the problem. I need to set the state.value to undefined to clear the current selection of the list.