Chosen and React

Question

I want handle chosen events in react, example how it work in plain js.

So I created react component for chosen:

@ChosenSelect = React.createClass
  propTypes:
    options: React.PropTypes.array

  componentWillMount: ->
    @setState
      selected: @props.value

  componentDidMount: ->
    select = $(ReactDOM.findDOMNode(@refs.select))

    $(select).chosen()
      .on('chosen:showing_dropdown', @props.onShowingDropdown)
      .on('chosen:hiding_dropdown', @props.onHiddingDropdown) 
      .change @props.onChange

  renderOption: (option) ->
    <option key={option.value} value={option.value}>{option.label}</option>

  renderSelectOptions: ->
    if @props.options
      ops = @props.options.map (option) =>
        if option.type == 'group'
          <optgroup label={option.name}>
            {
              option.items.map((item) =>
                @renderOption(item))
            }
          </optgroup>
        else
          @renderOption option

  render: ->
    selectProps = $.extend({}, @props, ref: 'select')
    <select {...selectProps} value={ @state.selected }>
      {@props.children}
      {@renderSelectOptions()}
    </select>

How I use this component:

<ChosenSelect className="form-chosen-select"
              ref="chosen"
              options={ @state.list }
              onShowingDropdown=@toggleFormState
              onHiddingDropdown=@toggleFormState
              onChange=@change />

But onHiddingDropdown blocks onChange event, If I using only onChange without onHiddingDropdown all works fine. Maybe someone faced with similar?

UPD. Found the same problem: link, change event does not come, because I changed the state.

Clarification why do you need `onHiddingDropdown` then? – aug May 19 '16 at 19:05 — aug, May 19 '16 at 19:05
For add/remove the class, depending on state of chosen – May 19 '16 at 19:06 — , May 19 '16 at 19:06

score 0 · Answer 1 · answered May 19 '16 at 21:40

I found this trick:

$(select).chosen()
  .on('chosen:showing_dropdown', @props.onShowingDropdown)
  .on('chosen:hiding_dropdown', @handleHiddingDropdown)
  .change @props.onChange

handleHiddingDropdown: ->
  setTimeout =>
    @props.onHiddingDropdown() if @props.onHiddingDropdown
  , 1

Chosen and React

1 Answers1