Add select in popup

[fabiulous]

Is there any method to add a select type to popup?

I would like to have a bit more advanced form with select type, but from the code it appears to only support normal inputs.

What do you recommend in such cases?

[tbleckert]

It's solved by passing a component as the content. So you would make a component that displays the form which you then pass to the popup. A quick example:

class Form extends Component {

    constructor(props) {
        super(props);

        this.state = {
            value: null
        };

        this.onChange = (e) => this._onChange(e);
    }

    componentDidUpdate(prevProps, prevState) {
        if (prevState.value !== this.state.value) {
            // Store the value outside of this component
            // so that you can use it when you close the popup
            this.props.onChange(this.state.value);
        }
    }

    _onChange(e) {
        this.setState({value: e.target.value});
    }

    render() {
        return (
            <select value={this.state.value} onChange={this.onChange}>
                <option value="1">1</option>
                <option value="2">2</option>
            </select>
        );
    }

}

The just open the popup like this

let selectValue = null;

function onSelectChange(value) {
    selectValue = value;
}

function onFormSave(Popup) {
    // Do something with selectValue
    Popup.close();
}

Popup.create({
    title   : 'Popup title',
    content : <Form onChange={onSelectChange} />,
    buttons : {
        left  : ['cancel'],
        right : [{
            className : 'success',
            text      : 'Save',
            action    : onFormSave
        }]
    }
});

Let me know if you need further explanation or have any other questions. Please close the issue when you feel satisfied with the answer.

[tbleckert]

I'm closing this one @shizpi