Commit e45c963d authored by Pavel Kurochka's avatar Pavel Kurochka
Browse files

Fix android keyboard events handling

parent 32b75983

projects/angular-mentions/src/lib/mention.directive.ts

+24 −9
Original line number Original line Diff line number Diff line 
import { Directive, ElementRef, ComponentFactoryResolver, ViewContainerRef, TemplateRef } from "@angular/core";

import { ComponentFactoryResolver, Directive, ElementRef, TemplateRef, ViewContainerRef } from "@angular/core";

import { Input, EventEmitter, Output, OnChanges, SimpleChanges } from "@angular/core";

import { EventEmitter, Input, OnChanges, Output, SimpleChanges } from "@angular/core";

import { getCaretPosition, getValue, insertValue, setCaretPosition } from './mention-utils';





import { MentionConfig } from "./mention-config";

import { MentionConfig } from "./mention-config";

import { MentionListComponent } from './mention-list.component';

import { MentionListComponent } from './mention-list.component';

import { getValue, insertValue, getCaretPosition, setCaretPosition } from './mention-utils';





const KEY_BACKSPACE = 8;

const KEY_BACKSPACE = 8;

const KEY_TAB = 9;

const KEY_TAB = 9;
@@ -15,7 +15,7 @@ const KEY_LEFT = 37; 
const KEY_UP = 38;

const KEY_UP = 38;

const KEY_RIGHT = 39;

const KEY_RIGHT = 39;

const KEY_DOWN = 40;

const KEY_DOWN = 40;

const KEY_2 = 50;

const KEY_BUFFERED = 229;





/**

/**

 * Angular 2 Mentions.

 * Angular 2 Mentions.
@@ -27,6 +27,7 @@ const KEY_2 = 50; 
  selector: '[mention], [mentionConfig]',

  selector: '[mention], [mentionConfig]',

  host: {

  host: {

    '(keydown)': 'keyHandler($event)',

    '(keydown)': 'keyHandler($event)',

    '(input)': 'inputHandler($event)',

    '(blur)': 'blurHandler($event)',

    '(blur)': 'blurHandler($event)',

    'autocomplete': 'off'

    'autocomplete': 'off'

  }

  }
@@ -67,6 +68,7 @@ export class MentionDirective implements OnChanges { 
  private searchList: MentionListComponent;

  private searchList: MentionListComponent;

  private searching: boolean;

  private searching: boolean;

  private iframe: any; // optional

  private iframe: any; // optional

  private lastKeyCode: number;





  constructor(

  constructor(

    private _element: ElementRef,

    private _element: ElementRef,
@@ -147,8 +149,21 @@ export class MentionDirective implements OnChanges { 
    this.stopSearch();

    this.stopSearch();

  }

  }





  inputHandler(event: any, nativeElement: HTMLInputElement = this._element.nativeElement) {

    if (this.lastKeyCode === KEY_BUFFERED && event.data) {

      let keyCode = event.data.charCodeAt(0);

      this.keyHandler({ keyCode, inputEvent: true }, nativeElement);

    }

  }



  // @param nativeElement is the alternative text element in an iframe scenario

  // @param nativeElement is the alternative text element in an iframe scenario

  keyHandler(event: any, nativeElement: HTMLInputElement = this._element.nativeElement) {

  keyHandler(event: any, nativeElement: HTMLInputElement = this._element.nativeElement) {

    this.lastKeyCode = event.keyCode;



    if (event.isComposing || event.keyCode === KEY_BUFFERED) {

      return;

    }



    let val: string = getValue(nativeElement);

    let val: string = getValue(nativeElement);

    let pos = getCaretPosition(nativeElement, this.iframe);

    let pos = getCaretPosition(nativeElement, this.iframe);

    let charPressed = event.key;

    let charPressed = event.key;
@@ -176,7 +191,7 @@ export class MentionDirective implements OnChanges { 
    let config = this.triggerChars[charPressed];

    let config = this.triggerChars[charPressed];

    if (config) {

    if (config) {

      this.activeConfig = config;

      this.activeConfig = config;

      this.startPos = pos;

      this.startPos = event.inputEvent ? pos - 1 : pos;

      this.startNode = (this.iframe ? this.iframe.contentWindow.getSelection() : window.getSelection()).anchorNode;

      this.startNode = (this.iframe ? this.iframe.contentWindow.getSelection() : window.getSelection()).anchorNode;

      this.searching = true;

      this.searching = true;

      this.searchString = null;

      this.searchString = null;
@@ -251,7 +266,7 @@ export class MentionDirective implements OnChanges { 
        }

        }

        else if (this.searching) {

        else if (this.searching) {

          let mention = val.substring(this.startPos + 1, pos);

          let mention = val.substring(this.startPos + 1, pos);

          if (event.keyCode !== KEY_BACKSPACE) {

          if (event.keyCode !== KEY_BACKSPACE && !event.inputEvent) {

            mention += charPressed;

            mention += charPressed;

          }

          }

          this.searchString = mention;

          this.searchString = mention;
@@ -301,7 +316,7 @@ export class MentionDirective implements OnChanges { 
      this.searchList.itemTemplate = this.mentionListTemplate;

      this.searchList.itemTemplate = this.mentionListTemplate;

      componentRef.instance['itemClick'].subscribe(() => {

      componentRef.instance['itemClick'].subscribe(() => {

        nativeElement.focus();

        nativeElement.focus();

        let fakeKeydown = {"keyCode":KEY_ENTER,"wasClick":true};

        let fakeKeydown = { keyCode: KEY_ENTER, wasClick: true };

        this.keyHandler(fakeKeydown, nativeElement);

        this.keyHandler(fakeKeydown, nativeElement);

      });

      });

    }

    }