How can i detect when the dropdown item is deselected

[mikedevita]

We want to disable a few different form elements based on whether onChange is fired and contains an option or not.

Basically to prevent users from continuing to fillout the form if the dropdown isnt picked..

however i noticed that onChange only fires when a new item is picked, not when an item is cleared/deselected.

[alsoscotland]

@mikedevita Thanks for using the control.

In regards to clearing the selection, it looks as though I am not firing change. That is a bug I will fix asap.

I need a little more info to figure out what is happening in regards to deselecting an option.
onChange should fire when options are removed: https://github.com/alsoscotland/react-super-select/blob/master/src/react-super-select.js#L1145

Are you seeing different results?

[mikedevita]

@alsoscotland here is the code example of what were doing.. were expecting onChange to fire even when an item is unchecked.. maybe option should return null or undefined?

import React, { PropTypes } from 'react'
import ReactSuperSelect from 'react-super-select'
export class TestCase extends React.Component {
  static propTypes = {

  }

  constructor (props) {
    super(props)

    this.state = {
      dropdownSelected: false
    }
  }

  handleSelectDropDown = (change) => {
    // make sure the dropdown is selected, if it isn't clear out state
    // which will disable the input
    if (change  === undefiend) {
      this.setState({ 
        dropdownSelected: false
      })
    } else {
      this.setState({
        dropdownSelected: true
      })
    }
  }

  render () {
    const testData = [
      {
        "id": "5507c0528152e61f3c348d56",
        "name": "elit laborum et",
        "size": "Large"
      },
      {
        "id": "5507c0526305bceb0c0e2c7a",
        "name": "dolor nulla velit",
        "size": "Medium"
      }
    ]

    return (<div>
    <ReactSuperSelect placeholder=\"Make a Selection\" 
      dataSource={testData} 
      onChange={handleSelectDropDown} />
    <input type='text' className='form-control' disabled={!this.state.dropdownSelected} />
    </div>)
  }
}

[alsoscotland]

@mikedevita Addressed your concerns with https://github.com/alsoscotland/react-super-select/tree/v0.4.0

1) I added a call to onChange when the component is cleared. 2) in previous versions, onChange was called with an empty array if no options were set, I have changed this call to "undefined"

Lastly, Just in case the code you pasted above is copied from somewhere, there is a typo in it: (change === undefiend) should be => (change === undefined)

Thanks for using the control