When you open the dropdown and don't select anything, you cannot click on anything behind it.

[thanhvuong]

I have a button below the multiselect component. When I click on the dropdown where it shows all the dropdown options and don't select anything. The button is no longer clickable because somehow the dropdown div is overlapping it.

[furqanZafar]

A code snippet would help, are you using an animated multiselect?

[thanhvuong]

Sorry, I meant to say it was happening on simpleselect. Haven't tried on multiselect yet but I can also find out.

Here is my form:

      <div className="fs-modal-content">
        <h4>Create New Element</h4>
        <form>
          <InputBox autoFocus field={elementName} label={'Element Name'} placeholder={'Enter a name for the new element.'} small={'Enter a name for the new element.'} />

<fieldset className="form-group">
      <label>Element Types</label>
      <SimpleSelect
        placeholder="Select Element Types"
        options={elementTypesList}
        value={elementType.value}
        onValueChange = {function(selectedElementType, callback){
          this.props.dispatch({type: 'redux-form/CHANGE', field: field, value: selectedElementType, touch: false, form: formName});
          callback();
        }.bind(this)}
      />
      <small className="text-muted">{small}</small>
    </fieldset>

          <fieldset className="form-group">
            <label>Parent</label>
            <div className="input-group">
              <span className="input-group-btn">
                <button className="btn btn-primary" onClick={::this.toggleModal}>Select Parent Element...</button>
              </span>
              <input type="text" className="form-control" placeholder="Select parent element..." disabled="true" value={parentElement.value ? parentElement.value.get('name') : 'System'} />
            </div>
            <small className="text-muted">Select a parent Element.</small>
          </fieldset>
          <button className="btn btn-primary modal-button-full" onClick={handleSubmit(::this.submit)} disabled={submitting}>
            {submitting && <i className="fa fa-cog fa-spinner fa-spin"></i>} Create New Element
          </button>
        </form>
      </div>

Here are some screenshots: http://imgur.com/a/rssgo

When you click on the dropdow, dont select anything and click anywhere outside to make the dropdown go away, the dropdown-transition div is overlapping the form where you cannot click on anything.

[furqanZafar]

Thanks for the detailed bug report.

The problem is caused because the ReactCSSTransitionGroup does not have an on transition end event will try to implement it with ReactTransitionGroup & see if it could solve the problem.

As a workaround for now you could add this to your css file: .react-selectize:not(.open) .dropdown-transition { pointer-events: none }

[furqanZafar]

fixed in release 0.3.10