Dropdown Missing Features

Howdy,

Dropdown is missing some features from the jquery bootstrap library

  • Support input/textarea in dropdown (click without closing)
  • Arrow key navigation, ui-bootstrap handles this incorrectly and the page still scrolls when using arrows.
  • Not close when clicking a disabled dropdown element
  • Close on outside touch/tap (mobile). Current document:click is mouse only and IMO not a great option as it fires for every click for every dropdown active on your page. It also makes it more difficult to control what to auto close for as it loses track of where clicks are happening inside the dropdown vs outside.

I’ve got some of these features on my own implementation that I no longer want to maintain and would rather use this project.
https://scttcper.github.io/ng2-bs-dropdown

I can make a pull request, but pretty much all of them require moving away from document:click towards another solution. I’ve placed a div with .dropdown-backdrop (like jquery bootstrap) that captures both taps and clicks when the dropdown is open, however this also catches the click and prevents clicks on lower levels from happening. So on

<button>Outside</button><div ngbDropdown [open]="true"></div>

the button won’t be clicked because the dropdown-backdrop captures the click, so button requires two clicks to activate. It could be possible to show the backdrop only when a touchstart is detected that way it’s only shown for mobile users.

Let me know your thoughts.

3 thoughts on “Dropdown Missing Features

  1. I have autoClose=false and I’m using .toggle and .close manually so that I can enter other sections of the dropdown and only close when the click occurs in a specific section (this of most datepickers). However, I still want to make it close if the click is outside the component.

    So to be able to do that, I’m using:

    host: {
            '(document:click)': 'onClick($event)',
        }
    

    and

    onClick(event:any) {
            if (!this._elementRef.nativeElement.contains(event.target))
                this.ngbDropdownRef.close()
        }
    

    Ideally something like [autoClose]=”‘onClickOutside'” would probably be best than having to had this code. Just another suggestion. 🙂