Switch from keyup to keydown to fix spacebar scrolling issue.

This commit is contained in:
Tim Donohue
2021-10-01 16:39:17 -05:00
parent 7747a8c4e2
commit 1d0a5c0e87
2 changed files with 10 additions and 10 deletions

View File

@@ -1,7 +1,7 @@
<div class="nav-item dropdown expandable-navbar-section" <div class="nav-item dropdown expandable-navbar-section"
*ngVar="(active | async) as isActive" *ngVar="(active | async) as isActive"
(keyup.enter)="isActive ? deactivateSection($event) : activateSection($event)" (keydown.enter)="isActive ? deactivateSection($event) : activateSection($event)"
(keyup.space)="$event.stopPropagation(); isActive ? deactivateSection($event) : activateSection($event)" (keydown.space)="isActive ? deactivateSection($event) : activateSection($event)"
(mouseenter)="activateSection($event)" (mouseenter)="activateSection($event)"
(mouseleave)="deactivateSection($event)"> (mouseleave)="deactivateSection($event)">
<a href="#" class="nav-link dropdown-toggle" routerLinkActive="active" <a href="#" class="nav-link dropdown-toggle" routerLinkActive="active"

View File

@@ -86,8 +86,8 @@ describe('ExpandableNavbarSectionComponent', () => {
fixture.detectChanges(); fixture.detectChanges();
const sidebarToggler = fixture.debugElement.query(By.css('div.nav-item.dropdown')); const sidebarToggler = fixture.debugElement.query(By.css('div.nav-item.dropdown'));
// dispatch the (keyup.enter) action used in our component HTML // dispatch the (keydown.enter) action used in our component HTML
sidebarToggler.nativeElement.dispatchEvent(new KeyboardEvent('keyup', { key: 'Enter' })); sidebarToggler.nativeElement.dispatchEvent(new KeyboardEvent('keydown', { key: 'Enter' }));
}); });
it('should call activateSection on the menuService', () => { it('should call activateSection on the menuService', () => {
@@ -104,8 +104,8 @@ describe('ExpandableNavbarSectionComponent', () => {
fixture.detectChanges(); fixture.detectChanges();
const sidebarToggler = fixture.debugElement.query(By.css('div.nav-item.dropdown')); const sidebarToggler = fixture.debugElement.query(By.css('div.nav-item.dropdown'));
// dispatch the (keyup.enter) action used in our component HTML // dispatch the (keydown.enter) action used in our component HTML
sidebarToggler.nativeElement.dispatchEvent(new KeyboardEvent('keyup', { key: 'Enter' })); sidebarToggler.nativeElement.dispatchEvent(new KeyboardEvent('keydown', { key: 'Enter' }));
}); });
it('should call deactivateSection on the menuService', () => { it('should call deactivateSection on the menuService', () => {
@@ -122,8 +122,8 @@ describe('ExpandableNavbarSectionComponent', () => {
fixture.detectChanges(); fixture.detectChanges();
const sidebarToggler = fixture.debugElement.query(By.css('div.nav-item.dropdown')); const sidebarToggler = fixture.debugElement.query(By.css('div.nav-item.dropdown'));
// dispatch the (keyup.space) action used in our component HTML // dispatch the (keydown.space) action used in our component HTML
sidebarToggler.nativeElement.dispatchEvent(new KeyboardEvent('keyup', { key: ' ' })); sidebarToggler.nativeElement.dispatchEvent(new KeyboardEvent('keydown', { key: ' ' }));
}); });
it('should call activateSection on the menuService', () => { it('should call activateSection on the menuService', () => {
@@ -140,8 +140,8 @@ describe('ExpandableNavbarSectionComponent', () => {
fixture.detectChanges(); fixture.detectChanges();
const sidebarToggler = fixture.debugElement.query(By.css('div.nav-item.dropdown')); const sidebarToggler = fixture.debugElement.query(By.css('div.nav-item.dropdown'));
// dispatch the (keyup.space) action used in our component HTML // dispatch the (keydown.space) action used in our component HTML
sidebarToggler.nativeElement.dispatchEvent(new KeyboardEvent('keyup', { key: ' ' })); sidebarToggler.nativeElement.dispatchEvent(new KeyboardEvent('keydown', { key: ' ' }));
}); });
it('should call deactivateSection on the menuService', () => { it('should call deactivateSection on the menuService', () => {