No space possible for <input> element in tab heading

[stefanmeschke]

Bug description

For a custom tab heading with an input element. It is not possible to insert a space in this input.
It seems that the space is not possible because of this code block:

ngx-bootstrap/src/tabs/tabset.component.ts

Lines 101 to 107 in 161f419

	if (event.keyCode === 13 || event.key === 'Enter' || event.keyCode === 32 || event.key === 'Space') {
	event.preventDefault();
	const currentTab = list[(index) % list.length];
	currentTab.click();
	return;
	}

Plunker/StackBlitz that reproduces the issue

https://stackblitz.com/edit/angular-kkt91e

Versions

ngx-bootstrap: 5.2.0
Angular: 8.2.13

Expected behavior

Input with space should be possible or it would be very nice to disable the whole key navigation.

[stefanmeschke]

I fixed it with:

Template
<input (keydown)=keydown($event) … />

Component

import { includes } from 'lodash';

…

public keydown(event: KeyboardEvent) {
  if (includes(['Space', 'ArrowLeft', 'ArrowRight'], event.code)) {
    event.stopPropagation();
  }
}

But I think an option to disable the keyboard events would be very very nice. ;)

Cheers
SM

[fhuschle]

I started reviewing/reproducing this issue. I think it can be closed as it can be fixed with the TabsetConfig.isKeysAllowed property or did i miss something?