Igniteui-angular: Disabling item selection inside a `IgxDropDownComponent` on `SPACE` key

[cornel-stoica-str]

Is there a way to disable Item selection / Dropdown closing in IgxDropDownComponent on SPACE key?

Hi,

I was wondering if i can disable the selection of an item from a IgxDropDownComponent when using the SPACE key. Perhaps by using the onItemActionKey method? If yes, can you please show me an example?

I could use the above method to stop the dropdown from closing as well.

I am implementing a filtering functionality. When the user presses SPACE inside the input, the dropdown closes or an item gets selected (if it has been focused).

Thank you for your time.

[wnvko]

We are handling the item navigation in IgxDropDownItemNavigationDirective. There if space was pressed we are calling onItemActionKey of IgxDropDown. In the drop down we are selecting the item and then close the drop down. However we are not passing the KeyboardEvent to onSelection event and there is no way to find why selection happened.
If you try to use onItemActionKey you should create your own extended IgxDropDown which will be a lot of codign as component inheritance in Angular does not inherit whatever is in @Component attribute.
One way to prevent selection and closing could be to handle keydown in document on propagation phase. Check if space was clicked and stop the event. You can add your handler in onOpening of the drop down and remove it in onClosed like this:

onOpening(event) {
    this.document.addEventListener('keydown', this.onKeyDown, true);
}
onClosed(event) {
    this.document.removeEventListener('keydown', this.onKeyDown, true);
}
onKeyDown = (e: KeyboardEvent) => {
    if (e.code === 'Space'){
        e.preventDefault();
        e.stopPropagation();
    }
}

[wnvko]

One other way is to use our IgxAutoComplete component.

[cornel-stoica-str]

Thank you. In the end, I ended up using the IgxAutoComplete component.