Semantic ui dropdown menu not working in react?

Question

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?

Weedoze · Accepted Answer · 2016-07-20 14:05:18Z

1

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();

answered Jul 20, 2016 at 14:05

Weedoze

14k2 gold badges38 silver badges65 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Semantic ui dropdown menu not working in react?

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related