CODEWITHSUNDEEP
angularevents
PeMa
PeMa

Reputation: 1696

Input: Avoid losing focus for touch on screen keyboard

As statet, I have input fields (atm Angular Material) inside a form container (mat-form-field). I try to use a custom on screen keyboard (simple-keyboard). However, I want the keyboard to open when the input field is focused and to close when it is not focused anymore: 

<mat-form-field class="full-width">
    <input matInput placeholder="input"
           type="number" formControlName="inputControl"
           #inputControl
           (focus)="showKeyboard =true"
           (blur)="showKeyboard=false"
    >
  </mat-form-field>
  <app-keyboard [style.display]="showKeyboard ? 'inline' : 'none'" 
                [inputName]="'inputControl'"
                (input)="inputControl.value=$event"></app-keyboard>

The problem is that for touch (or I don't know) events on the keyboard, the blur event of the input field seems to be triggered, and the keyboard is thus closed at each keystroke.

I've tried manually avoid bubbling of the focus and click events for the keyboard with (focus)="$event.stopImmediatePropagation()" but this didn't change anything.

Upvotes: 2

Views: 2184

Answers (1)

Bogdan B
Bogdan B

Reputation: 934

I suggest using the click event for mobile. On clicking inside the input element, open the keyboard and when clicking outside close the keyboard.

  @HostListener('document:click', ['$event']) clickedOutside(ev: any) {
    if (this.elementRef.nativeElement.contains(ev.target)) {
      this.showKeyboard = true;
    } else {
      this.showKeyboard = false;
    }
  }

while the elementRef is your input. I hope this helps.

Upvotes: 1

Related Questions