Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

bug: ion-tab-buttons irresponsive to enter/spacebar physical keyboard #18363

Closed
vali-de-man opened this issue May 23, 2019 · 3 comments

Comments

2 participants
@vali-de-man
Copy link

commented May 23, 2019

Bug Report

Ionic version:
[x] 4.x

Current behavior:
In an Ionic tabs starter the tabs are irresponsive to the Enter and Spacebar keys of the desktop's physical keyboard. I tested this in Chrome and Firefox.

Expected behavior:
Hitting Enter or Spacebar on the keyboard when focus is on a tab button should activate/select the tab button, just like a click event. This works for ion-button elements but does not work for ion-tab-button elements.
N.B.: this used to work in previous versions!

Steps to reproduce:

  1. Create an Ionic tabs starter.
    
  2. Run ionic serve, and preview in Firefox (don't see it working in other browsers either).
    
  3. Move along the tab buttons by using the physical "Tab" key on the keyboard.
    
  4. Observe that when a tab button receives focus, and one hits Enter or Spacebar, the tab is not activated.
    

Related code:

Other information:

Ionic info:

Ionic:

   ionic (Ionic CLI)             : 4.6.0 (C:\Users\wibaut\AppData\Roaming\npm\node_modules\ionic)
   Ionic Framework               : @ionic/angular 4.4.2
   @angular-devkit/build-angular : 0.13.9
   @angular-devkit/schematics    : 7.3.9
   @angular/cli                  : 7.3.9
   @ionic/angular-toolkit        : 1.5.1

System:

   NodeJS : v8.11.2 (C:\Program Files\nodejs\node.exe)
   npm    : 5.6.0
   OS     : Windows 10

@ionitron-bot ionitron-bot bot added the triage label May 23, 2019

@liamdebeasi

This comment has been minimized.

Copy link
Member

commented May 23, 2019

Hi there,

Thanks for the issue. I can confirm that hitting Enter does not select a tab; however, I am also seeing this bug on older versions of Ionic as well. Are you able to provide a test case where this used to work, but is not working anymore?

Thanks!

@ionitron-bot ionitron-bot bot removed the triage label May 23, 2019

@vali-de-man

This comment has been minimized.

Copy link
Author

commented May 24, 2019

Sorry for the delay, I didn't immediately find the cause. I eventually discovered that we got it working in our app due to a little not so Ionicky trick my colleague applied.
This implies my issue is actually a feature request: I would like to activate ion-tab-button elements by hitting Enter and Spacebar when they have focus, in a way the Ionic framework support.

To reproduce:

  • Create a tabs starter and run "npm i ionic@4.12.0 @ionic/angular@4.4.0"

Ionic info now gives:

Ionic:

   ionic (Ionic CLI)             : 4.12.0
   Ionic Framework               : @ionic/angular 4.4.0
   @angular-devkit/build-angular : 0.13.9
   @angular-devkit/schematics    : 7.3.9
   @angular/cli                  : 7.3.9
   @ionic/angular-toolkit        : 1.5.1

System:

   NodeJS : v8.11.2 (C:\Program Files\nodejs\node.exe)
   npm    : 5.6.0
   OS     : Windows 10

  • Now change tabs.page.ts to reflect:

import {AfterViewChecked, Component, DoCheck, OnInit} from '@angular/core';

@component({
selector: 'app-tabs',
templateUrl: 'tabs.page.html',
styleUrls: ['tabs.page.scss']
})
export class TabsPage implements OnInit, DoCheck, AfterViewChecked {

tabs: NodeListOf;
tabsChanged: boolean;

constructor() {
}

ngOnInit(): void {
console.log('ngOnInit TabsPage');
}

ngDoCheck(): void {
if (!this.tabs || this.tabs.length === 0) {
this.tabs = document.querySelectorAll('.sc-ion-tab-button-md');
}
}

ngAfterViewChecked(): void {
// workaround to fix key navigation on tabs : ionic>tabs>a href -->>
if (!this.tabsChanged && this.tabs.length > 0) {
this.tabs.forEach(e => e.setAttribute('href', '#'));
this.tabsChanged = true;
}
}
}

  • Run "ionic serve", navigate by the physical Tab key to put focus on Tab Two, and hit Enter. The tab is activated!

What doesn't work now though is the tab button's background upon receiving focus. Further, the trick works only for a very specific combination of the dependencies' versions, so I'm not happy with it. For instance if I upgrade/downgrade @ionic/angular to version 4.4.2 or 4.1.0 it no longer does its job.

Perhaps Ionic can offer a solution to the problem of making the ion-tab-buttons navigable by the physical keyboard.

@ionitron-bot ionitron-bot bot added triage and removed needs: reply labels May 24, 2019

@vali-de-man

This comment has been minimized.

Copy link
Author

commented May 24, 2019

Found a better work-around to the fact that the tabs don't respond to keyboard events by default, which is actually good enough.

On the ion-tab-button elements in the template:

<ion-tabs #tabs>
        <ion-tab-bar>
          <ion-tab-button tab="one" (keydown.enter)="selectTab('one')" (keydown.space)="selectTab('one')">
            <ion-icon name="mail"></ion-icon>
            <ion-label>Tab One</ion-label>
          </ion-tab-button>   
<ion-tab-button tab="two" (keydown.enter)="selectTab('two')" (keydown.space)="selectTab('two')">
            <ion-icon name="albums"></ion-icon>
            <ion-label>Tab Two</ion-label>
          </ion-tab-button>
<ion-tab-button tab="three" (keydown.enter)="selectTab('three')" (keydown.space)="selectTab('three')">
            <ion-icon name="apps"></ion-icon>
            <ion-label>Tab Three</ion-label>
          </ion-tab-button>     
</ion-tab-bar>
</ion-tabs>

..and in the tabs.page.ts:

import {Component, OnInit, ViewChild} from '@angular/core';

@Component({
  selector: 'app-tabs',
  templateUrl: './tabs.page.html',
  styleUrls: ['./tabs.page.scss'],
})
export class TabsPage implements OnInit {

  @ViewChild('tabs') tabs;

  constructor() {
  }

  ngOnInit(): void {
    console.log('ngOnInit TabsPage');
  }

  selectTab(tabProperty: string): void {
    this.tabs.select(tabProperty);
  }
}

Hope that's helpful to anyone encountering the same issue. Thanks for your time!

@ionitron-bot ionitron-bot bot removed the triage label May 24, 2019

@liamdebeasi liamdebeasi added this to Backlog 🤖 in Ionic Core via automation May 24, 2019

@liamdebeasi liamdebeasi moved this from Backlog 🤖 to Needs review 🤔 in Ionic Core May 24, 2019

Ionic Core automation moved this from Needs review 🤔 to Done 🎉 May 29, 2019

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.