fix: (Platform) fix a Range Error (Maximum calls) on Mobile View Comb…

…obox Safari (SAP#4002) * fix: (Platform) fix range error on safari * fix: (Platform) prevent circlular blur event for safari
nowant · Dec 7, 2020 · ed250b4 · ed250b4
1 parent 98c74b9
commit ed250b4
Show file tree

Hide file tree

Showing 2 changed files with 15 additions and 18 deletions.
diff --git a/libs/platform/src/lib/components/form/combobox/combobox/combobox.component.html b/libs/platform/src/lib/components/form/combobox/combobox/combobox.component.html
@@ -42,6 +42,7 @@
             fdp-auto-complete
             [options]="_suggestions"
             [inputText]="inputText"
+            [mobile]="mobile"
             type="text"
             fd-input-group-input
             tabindex="0"

diff --git a/libs/platform/src/lib/components/form/combobox/directives/auto-complete.directive.ts b/libs/platform/src/lib/components/form/combobox/directives/auto-complete.directive.ts
@@ -1,10 +1,8 @@
-import { Directive, ElementRef, EventEmitter, HostListener, Input, OnDestroy, Output } from '@angular/core';
+import { Directive, ElementRef, EventEmitter, HostListener, Input, Output } from '@angular/core';
 import { BACKSPACE, CONTROL, DELETE, ENTER, ESCAPE, LEFT_ARROW, RIGHT_ARROW } from '@angular/cdk/keycodes';
 
 import { KeyUtil } from '@fundamental-ngx/core';
 import { OptionItem } from '../../../../domain/data-model';
-import { fromEvent, Subscription } from 'rxjs';
-import { filter } from 'rxjs/operators';
 
 export interface AutoCompleteEvent {
     term: string;
@@ -15,7 +13,7 @@ export interface AutoCompleteEvent {
     // tslint:disable-next-line:directive-selector
     selector: '[fdp-auto-complete]'
 })
-export class AutoCompleteDirective implements OnDestroy {
+export class AutoCompleteDirective {
     /** Values that will fill missing text in the input. */
     @Input()
     options: OptionItem[];
@@ -27,6 +25,10 @@ export class AutoCompleteDirective implements OnDestroy {
     @Input()
     inputText: string;
 
+    /** Check is directive use in mobile view to prevent additional blur events */
+    @Input()
+    mobile: boolean;
+
     /** Event thrown, when the auto ahead text is accepted */
     @Output()
     readonly onComplete: EventEmitter<AutoCompleteEvent> = new EventEmitter<AutoCompleteEvent>();
@@ -46,24 +48,18 @@ export class AutoCompleteDirective implements OnDestroy {
         ESCAPE
     ];
 
-    private readonly _fromEventSub: Subscription;
-
     private _oldValue: string;
     private _lastKeyUpEvent: KeyboardEvent;
 
-    constructor(private readonly _elementRef: ElementRef) {
-        this._fromEventSub = fromEvent(this._elementRef.nativeElement, 'blur')
-            .pipe(filter(() => !!this.inputText))
-            .subscribe(() => {
-                const inputTextLength = this.inputText.length;
-                this._elementRef.nativeElement.value = this.inputText;
-                this._setSelectionRange(inputTextLength, inputTextLength);
-            });
-    }
+    constructor(private readonly _elementRef: ElementRef) { }
 
-    ngOnDestroy(): void {
-        if (this._fromEventSub) {
-            this._fromEventSub.unsubscribe();
+    /** @hidden */
+    @HostListener('blur')
+    handleBlur(): void {
+        if (Boolean(this.inputText) && !this.mobile) {
+            const inputTextLength = this.inputText.length;
+            this._elementRef.nativeElement.value = this.inputText;
+            this._setSelectionRange(inputTextLength, inputTextLength);
         }
     }