CODEWITHSUNDEEP
javascriptreactjssemantic-ui
Herks
Herks

Reputation: 897

Semantic ui dropdown menu not working in react?

I've learning the semantic-ui recently and everything works smoothly with react until the dropdown menu. Here's the code:

render() {
    return (<div className="ui form">
                        <div className="field">
                            <div className="ui selection dropdown">
                                <input type="hidden" name="options"/>
                                <i className="dropdown icon"></i>
                                <div className="default text">Options</div>
                                <div className="menu">
                                    <div className="item">Option 1</div>
                                    <div className="item">Option 2</div>
                                </div>
                            </div>                                                                          
                        </div>
                    </div>);
}

I'm not using any css nor libraries except react and semantic-ui, it just shows a dropdown menu that can't be clicked, any idea about it?

Upvotes: 1

Views: 2257

Answers (1)

Weedoze
Weedoze

Reputation: 13943

From the Semantic UI docs :

Any select element initialized as dropdown will also be hidden until Javascript can create HTML, this is to avoid the flash of unstyled content, and the change in element height adjusting page flow.

You must add the following javascript in order to make you dropdown work

$('.ui.dropdown').dropdown();

Upvotes: 1

Related Questions