ng-bootstrap / ng-bootstrap

Angular powered Bootstrap
https://ng-bootstrap.github.io
MIT License
8.22k stars 1.55k forks source link

dropdown item keyboard selection with autoclose = true not happening #3253

Open IAfanasov opened 5 years ago

IAfanasov commented 5 years ago

Bug description:

selection works when autoclose is false.

dropdownbug

Link to minimally-working StackBlitz that reproduces the issue:

https://stackblitz.com/edit/angular-6c8p1w?file=app/dropdown-manual.ts

Versions of Angular, ng-bootstrap and Bootstrap:

Angular: reproduced on 8.0.0 and 7.1.3 ng-bootstrap: 4.2.1 Bootstrap: 4.3.1

excerpt from src/dropdown/dropdown.ts

...
    // closing on Enter / Space
    if (key === Key.Space || key === Key.Enter) {
      if (isEventFromItems && (this.autoClose === true || this.autoClose === 'inside')) {
        this.close();
      }
      return;
    }

    // opening / navigating
    if (isEventFromToggle || isEventFromItems) {
....

navigation is not happening when user press enter or space. Would you mind if I change it to allow navigation and close dropdown async if it required? I suppose without async closing dropdown item will disappear before click event fires.

upd found a workaround and added into the stackblitz. good enough for now.

IAfanasov commented 5 years ago

I feel like proposed solution could break backward compatibility. don't mind if it will be just closed

kerbs17 commented 5 years ago

This is also happening to me when I select an item using the mouse, doesn't seem specific to using the keyboard.

IAfanasovMob commented 5 years ago

This is also happening to me when I select an item using the mouse, doesn't seem specific to using the keyboard.

work with mouse for me (: on attached stackblitz as well. @kerbs17 may you please provide a stackblitz with reproduction of the bug? feels like it is a different one and reproduction will help investigate it

kerbs17 commented 5 years ago

Interesting, I'm using your provided stackblitz url and it doesn't work in Chrome, FF, or Safari on my Mac.

IAfanasovMob commented 5 years ago

@kerbs17 it's about selection using keyboard (: I see in the gif attached you use a mouse