I would like to block the event that occurs when the spacebar is pressed. The point is that the user should not be able to enter an empty space in input. The problem occurs in the macOs system where the double space turns into a dot. Then, despite the fact that the input in the template has (keydown.space)="$event.preventDefault()", a dot is added to the input text with a space at the end. Is there any option to block this behavior? I also tried to edit text with setValue in the valueChanges, but then the cursor changes its position and it doesn't look nice. I will be very grateful for any suggestions.

// profile.component.ts
@Component({
  selector: 'app-profile',
  templateUrl: './profile.component.html',
  styleUrls: ['./profile.component.scss'],
})
export class ProfileComponent implements OnInit, OnDestroy {
  userEmail = new FormControl('');

  destroy$ = new Subject<void>();

  ngOnInit() {
    this.observeUserEmailValue();
  }

  ngOnDestroy(): void {
    this.destroy$.next();
    this.destroy$.unsubscribe();
  }

  observeUserEmailValue(): void {
    this.userEmail.valueChanges
      .pipe(takeUntil(this.destroy$))
      .subscribe((userEmailValue: string) => {
        this.userEmail.setValue(userEmailValue.trim(), {
          emitEvent: false,
        });
      });
  }
}

// profile.component.html
<input 
  type="email" 
  [formControl]="userEmail"
  (keydown.space)="$event.preventDefault()"
>