Select with select2.js

[Nilo]

Suggestion of integration with react-select2-wrapper

Select2.js

define(function (require, exports, module) {/*jshint node:true */

'use strict';

var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };

var React = require('react');
var ReactDOM = require('react-dom')
var Formsy = require('formsy-react');
var ComponentMixin = require('./mixins/component');
var Row = require('./row');
var select2 = require('select2')

var Select = React.createClass({
    mixins: [Formsy.Mixin, ComponentMixin],

    displayName: 'Select',

    getDefaultProps: function(){
        return {
            data: [],
            events: [
              ['change', 'changeValue'],
              // ['select2:open', 'onOpen'],
              // ['select2:close', 'onClose'],
              ['select2:select', 'changeValue'],
              ['select2:unselect', 'changeValue'],
            ],
            options: {},
            multiple: false
        };
    },

    getInitialState: function() {
        return {
          el: null,
        };
    },

    changeValue: function changeValue(event) {
        console.log("changeValue", event);
        var target = event.currentTarget;
        var value;
        if (this.props.multiple) {
            value = [];
            for (var i = 0; i < target.length; i++) {
                var option = target.options[i];
                if (option.selected) {
                    value.push(option.value);
                }
            }
        } else {
            value = target.value;
        }
        this.setValue(value);
        this.props.onChange(this.props.name, value);
    },

    componentDidMount() {
        if (this.props.select2 != undefined){
            this.el = $(ReactDOM.findDOMNode(this));
            this.el.select2(this.props.select2);
            this.props.events.forEach(event => {
              this.el.on(event[0], this.changeValue);
            });
        }
    },

    componentWillUnmount() {
        if (this.props.select2 != undefined){
            this.props.events.forEach(event => {
              this.el.off(event[0], this.changeValue);
            });
            this.el.select2('destroy');
        }
    },

    renderElement: function renderElement() {
        var optionNodes = this.props.options.map(function (item, index) {
            return React.createElement(
                'option',
                _extends({ key: index }, item, { label: null }),
                item.label
            );
        });
        return React.createElement(
            'select',
            _extends({
                className: 'form-control'
            }, this.props, {
                id: this.getId(),
                value: this.getValue(),
                onChange: this.changeValue,
                disabled: this.isFormDisabled() || this.props.disabled
            }),
            optionNodes
        );
    },

    render: function render() {

        if (this.getLayout() === 'elementOnly') {
            return this.renderElement();
        }

        return React.createElement(
            Row,
            _extends({}, this.getRowProperties(), {
                htmlFor: this.getId()
            }),
            this.renderElement(),
            this.renderHelp(),
            this.renderErrorMessage()
        );
    },
});

module.exports = Select;
});

[Tim Brayshaw]

Hi, I won't be adding support for form controls that aren't officially supported / recommended by Bootstrap.

However, I'll add a page to the wiki showing this example as it looks like it could be handy for others.