[SelectField] - onChange is not being triggered when the new value is typed and the component gets out of focus

[davosolo]

Description

When the user focus the SelectField and start typing one of its options in the list, the option is populated as the SelectField value which is good, the problem is that when the user gets out of focus of the SelectField, even though the field's value changed, the onChange function is not being called so I can execute the chained actions for the SelectField.

It works fine when hitting enter or space bar to select the value, but not with the out of focus event.

Version

• React - 16.1.1
• React-MD - 1.2.8
• Browser: Only tested in Chrome

[jojo-tutor]

@davosolo , I'm having the same issue, is this already fixed?

[davosolo]

@jojo-tutor No, they haven't. What I did was to create an onKeyDown callback for the SelectField to prevent that the item was populated with the selected item using the keyboard arrows or letters. That way the user shouldn't expect that when you go out of focus, the item should be selected.

This is obviously not a solution but I didn't have too much time to spend on it.

[jojo-tutor]

@davosolo , I've fixed this issue by wrapping the SelectField component to my custom Component, here is the example component:

Check this demo on Codepen: https://codepen.io/jojo-tutor/pen/GQwjvj?editors=0010

import React, { PureComponent } from 'react'
import { SelectField } from 'react-md'
import PropTypes from 'prop-types'

class AdvanceSelectField extends PureComponent {
  constructor(props) {
    super(props)
    this.ref = null
  }
  handleBlur() {
    const { id, onChange, value: propsValue } = this.props
    const { state, props } = this.ref
    const { activeIndex } = state
    const { menuItems, itemValue } = props
    const isObject = menuItems.length && typeof menuItems[0] === 'object'
    const value = (activeIndex > -1)
      ? isObject ? menuItems[activeIndex][itemValue] : menuItems[activeIndex]
      : null
    
    if (value && propsValue !== value) {
      props.value = value
      onChange(value)
    }
  }
  render() {
    return (
      <SelectField
        ref={ref => this.ref = ref}
        onBlur={() => this.handleBlur()}
        {...this.props}
      />
    )
  }
}

AdvanceSelectField.defaultProps = {
  onChange: () => {}
}

AdvanceSelectField.propTypes = {
  id: PropTypes.string.isRequired,
  onChange: PropTypes.func
}

export default AdvanceSelectField

So, instead of using:

<SelectField
    key='role'
    id='role'
    label='Select role: (menu as array of string)'
    menuItems={roles}
    className='md-cell md-cell--12 dropdown_menu blank-left-icon'
    position={SelectField.Positions.BELOW}
    value={role}
    onChange={this.handleChange.bind(this, 'role')}
/>

Just use this:

<AdvanceSelectField
    key='role'
    id='role'
    label='Select role: (menu as array of string)'
    menuItems={roles}
    className='md-cell md-cell--12 dropdown_menu blank-left-icon'
    position={SelectField.Positions.BELOW}
    value={role}
    onChange={this.handleChange.bind(this, 'role')}
/>

Let me know if this solves the issue or not. "A simple thanks is appreciated".

P.s. I think this is not the best solution though.

[davosolo]

@jojo-tutor It might not be the best solution, but it looks like a great fix, I'll definitely have to give it a try. And I'm sure it can help others with the same problem as well. Thanks for sharing.