angularangular-materialmat-selectmat-option

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


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

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.


Solution

  • 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