Dropdown - autoclose on outside click option

[NgxDev]

Feature request

It would be a useful addition to have another autoClose option: onOutsideClick (or another meaningful name), so we can keep the dropdown open as long as we click somewhere inside it.

[forrestab]

Since this project uses Typescript and Typescript supports enums, you all may want to consider changing autoClose to accept an enum instead of a boolean.

[pkozlowski-opensource]

so we can keep the dropdown open as long as we click somewhere inside it.

This can be easily achieved by stopping propagation of click events triggered on menu item elements.

[pkozlowski-opensource]

This can be easily achieved by stopping propagation of click events triggered on menu item elements.

Scratch this - it won't work properly with multiple dropdowns...

[pkozlowski-opensource]

Since this project uses Typescript and Typescript supports enums, you all may want to consider changing autoClose to accept an enum instead of a boolean.

@forrestab enums are not ideal since you would have to expose an enum on a component's instance. In practice to achieve the following:

<div ngbDropdown [autoClose]="CloseEnum.INSIDE">
...html
</div>

You would have to have CloseEnum on the component's instance which is too much pain in practice, IMO. How about the following API:

@Input() autoClose: boolean | 'inside' | 'outside';

[mscudlik]

The document click listener currently runs in the zone

'(document:click)': 'closeFromOutsideClick($event)'

This means each click will trigger an angular change detection.
If you have one dropdown thats not a problem. If you have lots of dropdowns (for example in a large table) it will become a performance problem. You should replace the event listener to run outside of the angular zone with ngZone.runOutsideAngular() and do the change detection manually only if required

[pkozlowski-opensource]

@matthiasscudlik you are right, we are planning to change it. The issue is already tracked via #900