JSFiddle - React, Tailwind, and code Playground

by gbos

HTML

<div id="react-root"></div>

SCSS

.multiselect {
    width: 100%;
}

.selectBox {
    position: relative;
}

.selectBox select {
    width: 100%;
    font-weight: bold;
}

.overSelect {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
}

#checkboxes {
    /*display: none;*/
    border: 1px #dadada solid;
    max-height: 125px;
    overflow-y: auto;
    z-index: 5;
    padding: 2%;
    input.filter {
        display: block;
        width: 96%;
    }
    label {
        display: block;
        &:hover {
            background-color: #1e90ff;
        }
    }
}

.overlay {
    background: rgba(255, 0, 0, 0.5);
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: -1;
}

Babel + JSX

const { render, Component } = React;

//https://stackoverflow.com/questions/17714705/how-to-use-checkbox-inside-select-option


class SelectMulti extends Component {

	constructor (props) {
    	super(props);
        this.state = {show: false};
    }

    toggle () {
    	this.setState({show: !this.state.show});
    }
	render () {
    	
    	return (<div className="multiselect">
            <div className="selectBox" onClick={this.toggle.bind(this)}>
                <select>
                    <option>Select an option</option>
                </select>
                <div className="overSelect"></div>
            </div>
            
                <div className="overlay" onClick={this.toggle.bind(this)}></div>
            
            {this.state.show ? <div id="checkboxes">
            <input className="filter" placeholder="filter"/>
                {this.props.options.map(o => (<label>
                <input type="checkbox"/>{o[this.props.labelName]}</label>))}
            
            </div> : undefined }
        </div>);
    }
}


const options = Array(20).fill().map((_,i) => ({id: i, name: `name ${i}`}));



render(
<div>
    <SelectMulti options={options} labelName="name"/>
    <button>Test</button>
</div>, document.getElementById('react-root'));