node.dispatchEvent(new Event(name, {bubbles: true}));

should be used in place of

$node.trigger(name);

since the former is available to all listeners whereas the latter is only available to jQuery or to listeners attached directly to $node (i.e. it bubbles in jQuery but not in DOM).

In the case of the blur event the node.blur() function can be used instead.

The relevant sections of code are:

checkbox.js:507
dropdown.js:2187
search.js:213

What led me to this was trying to get <select> dropdowns to work with React. Without this modification the settings.onChange function must be set to update the React state. With this modification the following examples all function the same way:

• Without Semantic UI:

    <select onChange={this._change}>
        <option value=1>Value 1</option>
        <option value=2>Value 2</option>
    </select>

• With Semantic UI CSS (no JS):

    <select onChange={this._change} className="ui dropdown">
        <option value=1>Value 1</option>
        <option value=2>Value 2</option>
    </select>

• With Semantic UI CSS + JS:

    <select onChange={this._change} className="ui dropdown">
        <option value=1>Value 1</option>
        <option value=2>Value 2</option>
    </select>

    $('select.dropdown').dropdown();

This makes the integration with React automatic in these cases.