Select doesn`t lose focus after open dropdown menu within it

• I have searched the issues of this repository and believe that this is not a duplicate.

Expected Behavior

After picking an option from Select and clicking outside the select container, Select must lose focus.

Current Behavior

After picking an option from Select and clicking outside the select container, Select doesn`t lose focus.

via GIPHY

https://media.giphy.com/media/5WicPCbBlK8t7Fl6nU/giphy.gif

Steps to Reproduce (for bugs)

1.Pick an option from Select 2.Clisk outside from Select container 3.Notice, Select stayed in focus state

Context

Top part:

import React from ‘react’; import TextField from ‘material-ui/TextField’; import Input, { InputLabel } from ‘material-ui/Input’; import MenuItem from ‘material-ui/Menu/MenuItem’; import { FormControl, FormHelperText } from ‘material-ui/Form’; import Select from ‘material-ui/Select’; import {inject, observer} from ‘mobx-react’; import ButtontForStepper from ‘./ButtontForStepper’; import {FIRST_STEP} from ‘constants/RacConstrains’; import uploadDefaultImg from ‘images/uploadBg.png’ import validate from ‘validate.js’; import classNames from ‘classnames’ import _ from ‘lodash’; import {PARSE_GEO_CODE} from ‘./parseGeoCode’; import FullDatePickerInput from ‘blocks/FullDatePickerInput’; const MEGABYTE = 1024 * 1024; const RACE_TYPES = [ ‘mass’, ‘wave’, ‘interval’, ‘one_by_one’]; @inject(‘raceStore’) @inject(‘alertStore’) @inject(‘httpClient’) @observer export default class CreateStepFirst extends React.Component { state = { errors: {} }; componentWillMount(){ this.geocoder = new google.maps.Geocoder(); } handleChange = (e) => { this.props.raceStore.handleChange({[e.target.name]: e.target.value}); }; componentDidMount() { console.log(‘clicked’); const input = document.getElementById(‘autocomplete’); const autocomplete = new google.maps.places.Autocomplete(input); autocomplete.addListener(‘place_changed’, () => { let place = autocomplete.getPlace(); if(place.formatted_address) this.handleChange( { target: { name: ‘race_location’, value: place.formatted_address } } ) }); } handleSubmit = e => { e.preventDefault(); const errors = validate(this.props.raceStore.dirtyRace, FIRST_STEP, {fullMessages: false}) || {}; this.setState({errors: errors}); if(_.isEmpty(errors)){ this.getComponentAddress().then(location => { this.props.raceStore.setLocation(location); this.props.raceStore.createRace(true); }); } };

Working Code inside component:

<div className="input-group select-wrap">

      <FormControl error={!!errors.sport_id} className='custom-select'>
        <InputLabel htmlFor="sport_id">Sport</InputLabel>
        <Select
          id='sport_id'
          label='Sport'
          name='sport_id'
          onChange={this.handleChange}
          value={race.sport_id}
        >
          {sportTypes.map(option => (
            <MenuItem key={option.title} value={option.id}>
              {option.title}
            </MenuItem>
          ))}
        </Select>
        <FormHelperText>{errors.sport_id}</FormHelperText>
      </FormControl>
    </div>
    <div className="input-group select-wrap" style={{textTransform: 'capitalize'}}>
      <FormControl className='custom-select'>
        <InputLabel htmlFor="type">Type</InputLabel>
        <Select
          label='Type'
          name='start_type'
          input={<Input id='type'  onChange={this.handleChange} value={race.start_type || ''}/>}
          MenuProps={{animated: false}}
        >
          {RACE_TYPES.map(option => (
            <MenuItem key={option} value={option}>
              <span style={{textTransform: 'capitalize'}} >{option}</span>
            </MenuItem>
          ))}
        </Select>
      </FormControl>

Your Environment

Tech	Version
Material-UI	1.0.0-beta.27
React	15.6.2
browser	Chrome, Firefox

[TodBob]

I have same issue. But I think is hard to say if it is issue? This may be here because of accesibility and navigation, If you close select, you are still able enter and change option. If you lose completly the focus it will be hard move to next select in some Form for example. So I can see we need this behavior, but also will be nice to have easy option to turn off this behavior with some prop. I try useRef and then blur(). Also onClose, onExit props I try blur() with callback, but this have no effect.

My suggestion is: add props which is bool, and I cant turn on/off. If its ON? It will stay focused after exiting If its OFF? It will remove focus after exiting

[micahbales]

Also experiencing this issue in v4/react 16:

"@material-ui/core": "^4.4.0" "react": "^16.9.0"