Dropdown issue with autoClose set to 'outsideClick' starts to behave like 'disabled'

[trimeyko]

Place two dropdowns on a view one with autoClose="disabled" and second with autoClose="outsideClick", like :

<div class="btn-group" dropdown autoClose="disabled">
<button id="single-button" type="button" class="btn btn-primary" dropdownToggle>
Button dropdown <span class="caret"></span>
</button>
<ul dropdownMenu role="menu" aria-labelledby="single-button">
<li role="menuitem"><a class="dropdown-item" href="#">Action</a></li>
<li role="menuitem"><a class="dropdown-item" href="#">Another action</a></li>
<li role="menuitem"><a class="dropdown-item" href="#">Something else here</a></li>
<li class="divider dropdown-divider"></li>
<li role="menuitem"><a class="dropdown-item" href="#">Separated link</a></li>
</ul>
</div>

<div class="btn-group" dropdown autoClose="outsideClick">
<button id="single-button" type="button" class="btn btn-primary" dropdownToggle>
Button dropdown <span class="caret"></span>
</button>
<ul dropdownMenu role="menu" aria-labelledby="single-button">
<li role="menuitem"><a class="dropdown-item" href="#">Action</a></li>
<li role="menuitem"><a class="dropdown-item" href="#">Another action</a></li>
<li role="menuitem"><a class="dropdown-item" href="#">Something else here</a></li>
<li class="divider dropdown-divider"></li>
<li role="menuitem"><a class="dropdown-item" href="#">Separated link</a></li>
</ul>
</div>

Open them one by one clicking to [Button dropdown] button, after few clicks dropdown which should close by outsideClick losing this behavior and closed only by opening other one.

Also same can be reproduced on demo page @ http://valor-software.com/ng2-bootstrap/#/dropdowns#config

open Configuring defaults dropdown
open Dropup variation dropdown

try clicking outside

[SergeyKuryatnick]

Will be fixed after this PR: #1771
Also, want to notice, changes after PR:

• autoClose is boolean, it can't be set as outsideClick or Disabled.
• use this flag in the component, not in Template.

[guryanovev]

Hey, guys, so the 'ousideClick' option is not supported any more? Now to do this, we need to listen to clicks or Esc btn manually. That does not sound like a good thing for me((

[valorkin]

autoclose: true, should close on any outside action
I will rethink adding keyboard nav, and outside click in some generic manner

[valorkin]

difference is: outsideClick behavior was including a difference between internal\external click
now it is doesn't and doesn't prevent events from default actions or bubling

[guryanovev]

autoclose: true, should close on any outside action

In my case, I have a datepicker inside the dropdown, so 'outsideClick' was just perfect, it prevented the dropdown from closing on datepicker UI clicks but did closing on outside actions. Maybe I need to stick with autoClose=true and to play around with preventing datepicker clicks from being bubbled up.

[valorkin]

Yes, exactly. Stop propagation is what you need.

[maxailloud]

I have almost the same case as @guryanovev and I feel a little disappointed by this.
I don't understand why you removed this option. I think the autoClose option was really nice, not having to add a layer of code to do the closing is part of having a dropdown IMO.
Why this change?

[valorkin]

It was solving only one issue, but solution is needed for several components (tooltips, popovers, etc.) any pop over components.
And it should be configurable auto closing on click, hover, etc.
Most known issue is popover outside click.
So I am want to add generic solution for all this use cases, which should cover this cases in the same manner
Like it was with positioning, which will become even better, when auto positioning will be published and all components will have this feature :)

[maxailloud]

Ok I see.

[a11smiles]

Not sure what happened, but the autoClose="true" doesn't work correctly (not sure if it broke in a latter build).

Now, I can click anywhere in the dropdown (I can click on the div itself) and the dropdown still closes - no matter what. Furthermore, the Esc does not close the dropdown.

[valorkin]

@a11smiles does it differs from bootstrap dropdowns?
https://getbootstrap.com/docs/4.0/components/dropdowns/

[valorkin]

latest dev available here: http://ngx-bootstrap.surge.sh/#/dropdowns#single-button