Ngx-bootstrap: fix(dropdown) autoClose on outside-click doesn't work with unallowed autoClose on inside-click

[tommueller]

Hi,

I just updated to angular4, so I had to update ngx-bootstrap as well.
I use the dropdowns quite a lot and was able to do all the upgrades needed, to get them working again, BUT the autoClose="onOutsideClick" feature seems to be gone. That was sooo important, why would you get rid of it?

Is there any way to get this functionality back?

Thanks a bunch!
Tom

[valorkin]

It will get back in another way, it is requested functionality for any popup elements
dropdowns, popovers, tooltips, modals... etc
so I am working on generic solution

[valorkin]

closing as duplicate

[sergeu90]

when approximately we will see this feature?

[Valery-vs]

+1

[jenbuzz]

@valorkin do you have an update on this issue?

[Soindek]

+1

[RixSka]

+1

[TonyCasey]

+1

[lex-rmondal]

:+1: much needed feature. Waiting on this.

[minnesotajosh]

Why would you remove this without a replacement in place?

[PsychicCat]

+1

[ThanhHuuTran]

+1

[gopalyadav5]

+1, Much needed feature, managing through workaround for now ... waiting for the fix.

[valorkin]

it's closing on outside click now (v1.9.0)
and there are open PR to add additional functionality to it
please try http://valor-software.com/ngx-bootstrap/#/dropdowns
and comment

[jppellerin]

It is also closing on inside click as well, which was not the original behavior. We built a custom date-time picker. Prior, when changing the month or performing any other data manipulation within the dropdown, ti wouldn't close. Now, with this change, any click inside the dropdown also closes it. The onOutsideClick gave a more flexible usage of the dropdown.

[muniom]

+1

[rashiagarwal]

waiting for this feature

[Anirudh-Konduri]

@gopalyadav5 could you please share the workaround that you implemented.

[holtzilya2008]

+1 Much needed!

[qwe852147]

Waiting CloseOutside feature...

[lishichao1002]

+1

[lishichao1002]

It's been a long time when we see this feature.

[nesinervink]

+1

[valorkin]

PR with inside click will be merged soon

[shaulnaim]

any news??? Need it asap...

[nesinervink]

ping?

[MerkulovDev]

how to close it outside? maybe some js script? any ideas?

[BarrMan]

I found the solution actually in this thread:
https://github.com/valor-software/ngx-bootstrap/issues/2635

They said that the code was merged in v2+ but for some reason I had to copy and add this directive by myself..

[kwall2020]

Yeah, it's not clear what is meant by "merged and released".

[ldoloscan]

Hey guys,
any changes on this ??
I see that DEVS are saying that is working in the latest versions, but on official documentation page I tried and is not, dropdown closes even inside of it !!

Can anyone confirm with an example of working outside click ??

Thanks in advance.

[YussufElarif]

Unfortunately, it hasn't been implemented yet.

I've added the dropdown to include multiple checkboxes.
Clicking outside the dropdown closes the dropdown which is what i am expecting but clicking inside the dropdown closes it, so the user has to keep opening the dropdown to make changes to the checkbox and won't be able to select multiple checkboxes without having to go through that process multiple times.

---

If supposedly you were to add an input field within the dropdown, users wont have the opportunity to write since it closes the moment you click the input.

[nvuhung]

+1 I really need this feature :(

[nesinervink]

Made this temporary solution for my specific use case. In Core module I added this:

import { BsDropdownToggleDirective } from 'ngx-bootstrap/dropdown';

export class CoreModule {

   constructor( ... ) {
      BsDropdownToggleDirective.prototype.onDocumentClick = function (event) {
         if (
            event.button !== 2 &&
            !this._element.nativeElement.contains(event.target) &&
            ( !event.target.classList.contains('dropdown-item') || this._state.autoClose )
         ) this._state.toggleClick.emit( false );
      };
   }

Please note that this logic might not be suitable for you. With above patch when autoClose is unset or set to true, dropdown closes on any click. When autoClose is set to false, it closes only on outside-click, but not when clicking an item (in this case button or a element) that has .dropdown-item class.

[pgarzina]

@nesinervink thanks, works great! I have bunch of items on which the dropdown needs to close and some on which doesnt.

[markleppke]

+1

[rammohangowd]

Hi, autoClose=false is working fine for inside click. But not working for outside click. when i click outside if i set [autoClose]="false" it's only close when i click on the element i open it from and it wont close if click anywhere else outside. if i set [autoClose]="true" it closes if i click anywhere inside the dropdown and outside the dropdown. Please suggest me when this fix will be provided.

[lyvyu]

Hey @rammohangowd take a look at comments above, @nesinervink provided a workaround, but yet nothing official from the developer !!

Hope it'll help.

[TharunMaddu]

Hi, I am using the dropdown and auto close is working fine for all the devices like desktop (any browser), android (any browser) but the problem is in IOS (any device, any browser) the auto close is not working when I'm clicking outside the dropdown and when I'm clicking inside the dropdown is autoclosing. I'm not setting [autoClose] in my code because the default behavior is true right. Please suggest me for a fix for ios devices.

[EoinGriffin-AI]

Here's an effective and simple workaround for anyone facing this issue in Angular (7).
Most likely this can also be translated to any JS/TS application by listening to the document.onclick event.

This will close the dropdown no matter where you click; it will still select whichever item you click on; and if your dropdown has a scrollbar that will continue to work.

HTML:

<div class="btn-group" dropdown #dropdownList="bs-dropdown">
... etc
</div>

Component:

  @ViewChild('dropdownList') private readonly dropdownList: BsDropdownDirective;
  @HostListener('document:click')
  closeDropdownList() {
    this.dropdownList.isOpen = false;
  }