How to make the first option unselected while the component is rendered in select with multiple?

Question

First option is always being selected when the select multiple is loaded. It becomes un-selected only when it's selected by holding ctrl key or when other options are selected. The drawback of this feature is that the onChange event handler cannot be called when the first is the only option that's selected and submitted.

createSelectItems(input_items) {
    let items = [];
    for (let i = 0; i < input_items.length; i++) {
        items.push(<option key={i} value={input_items[i]}>{input_items[i]}</option>);
    }
    return items;

render() {
    if(this.state.interfaces.length>0){
    return (
        <div className="interfaces">
            <label>select interfaces for <strong>{this.props.device}</strong>
                <select onChange={this.onInterfaceSelected} multiple>
                    {this.createSelectItems(this.state.interfaces)}
                </select>
                <p>{this.state.selected_interfaces}</p>
            </label>
            { this.state.selected_interfaces.length >0 && <button className="submit" onClick={this.submitInterfaces}>submit</button>}
        </div>
    );
}
return null;
}

In this case; submit button doesn't show up as well. How can I mitigate this?

Answer 1

Change your createSelectItems the following method,

createSelectItems(input_items) {
    let items = [];
    items.push(<option value={0} hidden>Select an option...</option>)
    for (let i = 0; i < input_items.length; i++) {
        items.push(<option key={i} value={input_items[i]}>{input_items[i]}</option>);
    }
    return items;
 }