Angular: When using mat-select , Is there a way to not select the focused item when I press SPACE button?

Question

By looking at, https://v5.material.angular.io/components/select/overview
There are several keyboard interactions.

• Keyboard interaction
• DOWN_ARROW: Focus next option
• UP_ARROW: Focus previous option
• ENTER or SPACE: Select focused item

I am able to stop the whole interaction, BUT what I want is:
keep the all the keyboard interactions, except the SPACE one

Is there a way to do it?
Thank you.

Answer 1

Take account the Georg-un's answer

But if there a great great reason you always can "re-writte" the function.

Use a template reference variable in your select

<mat-select #select="matSelect">
   ...
</mat-select>

And you can use ViewChild to get the mat select and rewrite the function

  @ViewChild('select', { static: true }) select: any;

  ngOnInit() {
    this.select._handleKeydown = (event: KeyboardEvent) => {
      if (event.keyCode==SPACE)
        return
      if (!this.select.disabled) {
        this.select.panelOpen
          ? this.select._handleOpenKeydown(event)
          : this.select._handleClosedKeydown(event);
      }
    };
  }

NOTE: SPACE is defined in

import { SPACE} from '@angular/cdk/keycodes';

Update we can use a directive also

@Directive({
  selector: '[no-space]',
})
export class NoSpaceDirective {
  @Output('spacekeydown') spacekeydown: EventEmitter<any> =
    new EventEmitter<any>();
    
constructor(@Self() private select: MatSelect) {
    this.select._handleKeydown = (event: KeyboardEvent) => {
      if (event.keyCode == SPACE) {
          const active=this.select.panelOpen?
                 this.select.options.filter(x=>x.active)[0]|| null:
                 null
        this.spacekeydown.emit(active?active.value:null);
      } else {
        if (!this.select.disabled) {
          this.select.panelOpen
            ? (this.select as any)._handleOpenKeydown(event)
            : (this.select as any)._handleClosedKeydown(event);
        }
      }
    };
  }

}

And you use as

<mat-select no-space 
     (spacekeydown)="doSomething($event)">
   ...
</mat-select>

As always, if we use as "selector" instead [no-space] mat-select

@Directive({
  selector: 'mat-select',
})
...

The directive is applied to all ours mat-select

see a stackblitz with the directive