title: <select> does not change its selected <option> when setting a default value
body: <p>I am creating a select component with a default value through props but suddenly when i tried to select an option, select do nothing.</p>
  
  <p>I tried not to put a initial value it solve the problem but the program should not act like that.</p>
  
  <pre><code>//UserMaintenanceModal
  class UserMaintenanceModal extends Component {
      state = {
          user_department: this.props.data.user_department,
          departments: [
              {id: 1, name: "IT"}, {id:2, name: "BM"}
          ]
      }
  
      handleChange = (event) =&gt; {
          this.setState({user_department: event.target.value});
      }
  
      render(){
          const { user_department } = this.state;
          return (
              &lt;label&gt;Department&lt;/label&gt;
              &lt;select 
                  className="form-control form-control-sm" 
                  name='user_department'
                  value={user_department}
                  onChange={this.handleChange}
               &gt;
               {
                this.state.departments != null &amp;&amp; this.state.departments.map(
                         department =&gt; 
                             &lt;option 
                                 key = {department.id} 
                                 value = {department.name}
                              &gt;
                                  {department.name}
                              &lt;/option&gt;
                        )
                 }
                 &lt;/select&gt;
          )
      }
  }
  </code></pre>
  
  <p><strong>Solution</strong></p>
  
  <p>Sorry, my mistake. I did not show all of the source code. The reason it was not changing it  because of this code which is inside a parent component.</p>
  
  <pre><code>//NavComponent
  
  componentWillMount() {
      document.addEventListener('mousedown', this.handleClick, false);
  }
  
  componentWillUnmount() {
    document.removeEventListener('mousedown', this.handleClick, false);
  }
  </code></pre>
  
  <p>I did get this code from <a href="https://medium.com/@pitipatdop/little-neat-trick-to-capture-click-outside-react-component-5604830beb7f" rel="nofollow noreferrer">here</a>. It act to hide active dropdown nav menu when click outside of the component.</p>