chore(dropdown): with autoClose 'outsideClick' closing when clicking inside element

[jurgenvo]

Hi,

i'm working on an implementation of the Dropdown and I'm having some trouble with the autoClose property. I set the autoClose to 'outsideClick' but the dropdown is toggled when I click inside the element as well. Here is what I have:

index.html:

<div id="dropdown-x" class="btn-group" dropdown [autoClose]="'outsideClick'">
    <button type="button" class="btn btn-default" dropdownToggle>
        <span class="glyphicons glyphicons-tag"></span> {{data?.reference}}
        <span class="caret"></span>
    </button>
    <div class="dropdown-menu" dropdownMenu>
        <edit-details [details]="dataDetails" (detailsApplied)="updateDetails($event)">Details</edit-details>
    </div>
</div>

The template of the edit-details component has the following html:

<div id="dropdown-content" *ngIf="details">
    <form role="form">
        <div class="row">
            <div class="col-lg-6">
                <input-text [(value)]="details.name" (input)="valueChanged('name', $event)"></input-text>
                ... some more inputs
            </div>
        </div>
    </form>
</div>

After some debugging I found that in the closeDropdown function in dropdown.service.ts, the this.openScope.menuEl is undefined. I think that the public set dropDownMenu in dropdown.directive.ts is never called, thus the this.menuEl is never set.

Any ideas on this are very welcome. Thanks!

[rluba]

It seems the reason is that the menu is never set for the dropdown. This causes the test whether the clicked element is inside the menu to always be false.

[rluba]

Additionally, the inclusion test only tests for equality instead of doing a proper "contains" check like the original bootstrap code.