fix(autocomplete): japanese input support for Chrome on Mac #11988 (#12328)

Author: valadzhov

projects/igniteui-angular/src/lib/directives/autocomplete/autocomplete.directive.spec.ts

@@ -781,6 +781,14 @@ describe('IgxAutocomplete', () => {
             fixture.detectChanges();
             expect(input.nativeElement.attributes['aria-expanded'].value).toEqual('false');
         }));
+        it('Should accept Japanese input', fakeAsync(() => {
+            UIInteractions.setInputElementValue(input, '東京', fixture);
+            fixture.detectChanges();
+            tick();
+            UIInteractions.triggerKeyDownEvtUponElem('enter', input.nativeElement, true);
+            fixture.detectChanges();
+            expect(input.value).toBe('東京');
+        }));
     });
     describe('Positioning settings tests', () => {
         it('Panel settings - direction and startPoint: top', fakeAsync(() => {

projects/igniteui-angular/src/lib/directives/autocomplete/autocomplete.directive.ts

@@ -211,6 +211,7 @@ export class IgxAutocompleteDirective extends IgxDropDownItemNavigationDirective
         return 'list';
     }
 
+    protected _composing: boolean;
     protected id: string;
     protected get model() {
         return this.ngModel || this.formControl;
@@ -234,6 +235,20 @@ export class IgxAutocompleteDirective extends IgxDropDownItemNavigationDirective
         this.open();
     }
 
+    /** @hidden @internal */
+    @HostListener('compositionstart')
+    public onCompositionStart(): void {
+        if (!this._composing) {
+            this._composing = true;
+        }
+    }
+
+    /** @hidden @internal */
+    @HostListener('compositionend')
+    public onCompositionEnd(): void {
+        this._composing = false;
+    }
+
     /** @hidden  @internal */
     @HostListener('keydown.ArrowDown', ['$event'])
     @HostListener('keydown.Alt.ArrowDown', ['$event'])
@@ -253,7 +268,7 @@ export class IgxAutocompleteDirective extends IgxDropDownItemNavigationDirective
 
     /** @hidden  @internal */
     public handleKeyDown(event) {
-        if (!this.collapsed) {
+        if (!this.collapsed && !this._composing) {
             switch (event.key.toLowerCase()) {
                 case 'space':
                 case 'spacebar':