[2.0.6 Dropdown] Dropdown not rendering inside Segment/Label

[Airforce111]

Hellos again~

While dynamically creating elements via JS, which in my case, included a dropdown inside a segment/label, the dropdown fails to render properly, even after refreshing the dropdown js via $(...).dropdown(...);

When adding on: 'click' to .dropdown(...), it fails to process the click event. However, it seems to work with on: 'hover click', although not 100%.

However, while creating the fiddle, I realized that the issue also occurs on statically created elements, as such, the static version is posted here to simplify the code example.
Fiddle: http://jsfiddle.net/Airforce111/40khyfL6/

For reference...

<div id="test">
    <!-- Default Test Case -->
    <div id="record-index-1" class="ui segment">
        <div class="ui top attached label">
            <span>Label Test</span>
            <div class="options ui dropdown top right pointing transparent icon button" style="position: absolute; right: 0em; top: 0.3em;">
                <i class="setting icon"></i> Click Me! Not Working!?
                <div class="menu">
                    <div class="header">Options</div>
                    <a class="item">
                        <i class="edit green icon"></i> Option 1
                    </a>
                    <a class="item">
                        <i class="warning red icon"></i> Option 2
                    </a>
                </div>
            </div>
        </div>        
        <div class="ui items">
            <div class="item">
                <div class="content">
                    <div class="ui header">Test Header</div>
                    <div class="description">Some Random Text Here. Nothing to See.</div>
                </div>
            </div>
        </div>
    </div>

    <!-- Click Fails -->
    <div id="record-index-1" class="ui segment">
        <div class="ui top attached label">
            <span>Label Test</span>
            <div class="options2 ui dropdown top right pointing transparent icon button" style="position: absolute; right: 0em; top: 0.3em;">
                <i class="setting icon"></i> Click Me! Click Event Fails =(
                <div class="menu">
                    <div class="header">Options</div>
                    <a class="item">
                        <i class="edit green icon"></i> Option 1
                    </a>
                    <a class="item">
                        <i class="warning red icon"></i> Option 2
                    </a>
                </div>
            </div>
        </div>        
        <div class="ui items">
            <div class="item">
                <div class="content">
                    <div class="ui header">Test Header</div>
                    <div class="description">Some Random Text Here. Nothing to See.</div>
                </div>
            </div>
        </div>
    </div>

    <!-- Hover/Click Working Somewhat -->
    <div id="record-index-1" class="ui segment">
        <div class="ui top attached label">
            <span>Label Test</span>
            <div class="options3 ui dropdown top right pointing transparent icon button" style="position: absolute; right: 0em; top: 0.3em;">
                <i class="setting icon"></i> Click Me! Hover Event Override Works Somewhat...
                <div class="menu">
                    <div class="header">Options</div>
                    <a class="item">
                        <i class="edit green icon"></i> Option 1
                    </a>
                    <a class="item">
                        <i class="warning red icon"></i> Option 2
                    </a>
                </div>
            </div>
        </div>        
        <div class="ui items">
            <div class="item">
                <div class="content">
                    <div class="ui header">Test Header</div>
                    <div class="description">Some Random Text Here. Nothing to See.</div>
                </div>
            </div>
        </div>
    </div>
</div>

#test {
    padding: 2em;
}
.ui.dropdown {
    font-size: 0.75em;
}

$('.options.ui.dropdown').dropdown({
    direction: 'downward',
    transition: 'slide down'
});

$('.options2.ui.dropdown').dropdown({
    on: 'click',
    direction: 'downward',
    transition: 'slide down'
});

$('.options3.ui.dropdown').dropdown({
    on: 'hover click',
    direction: 'downward',
    transition: 'slide down'
});

[jlukic]

This is part of next 2.0.7 release bug fixes. 37ad56b

Dropdown will not render inside a label
https://github.com/Semantic-Org/Semantic-UI/blob/next/RELEASE-NOTES.md#version-207---july-22-2015

Was bad logic used to determine if a click occurred in a multi-select label (which shouldnt open dropdown)

[Airforce111]

Awesome. =D