Topic: Mdb-auto-completer issue in Firefox
Hi,
I have a problem using mdb-auto-completer with Firefox.
If I get data from remote API, sometimes, pressed keys are ignored, so if I press back key (to delete last character typed), the event is forwarded to the page and I get redirect to previous page of my browse history.
With chrome browse it works fine.
How can I fix this issue?
Thanks
Marco
Did you ever find a fix for this? I am having the exact same problem?
Code below
<div class="md-form mt-3" *ngIf="inputType === inputTypeEnum.TEXTAREA">
<textarea
mdbInput
mdbValidate
type="text"
class="completer-input mdb-autocomplete md-textarea form-control"
ngClass="{{textAreaClass}}"
formControlName="textAreaControlName"
[mdbAutoCompleter]="auto"
[placeholder]="textAreaPlaceholder"
(focus)="onTextAreaFocus()"
(focusout)="onTextAreaFocusOut()"
(change)="onAnythingChanged(false)"
(clearBtnClicked)="onAnythingChanged(true)">
</textarea>
<mdb-error *ngIf="textAreaControl.invalid">
<span *ngFor="let e of textAreaControl.errors | keyvalue">
{{e.value}}
</span>
</mdb-error>
<mdb-auto-completer [disabled]="disabled" #auto="mdbAutoCompleter" textNoResults="" [clearButton]="true" [appendToBody]="true" (selected)="onAnythingChanged(false)">
<mdb-option *ngFor="let option of results | async" [value]="option">
<div class="d-flex justify-content-left align-items-center w-100">
<mdb-icon *ngIf="multipleSelected" far icon="images" class="align-self-center mx-1"></mdb-icon>
<span class="align-self-center mx-1">{{ option }}</span>
</div>
</mdb-option>
</mdb-auto-completer>
Arkadiusz Idzikowski staff commented 4 years ago
@photerloo We tried to reproduce this bug on our end but without success.
Can you provide more details about how to reproduce this problem step by step?
I have isolated this issue with the following component, you can reproduce by using firefox, here is a video showing the issue: https://drive.google.com/file/d/1f5iI51jk_TEd1ZpszPa-u3OL92IO7Gb5/view?usp=drivesdk
component.ts
import { Component, OnInit } from '@angular/core';
import { FormControl, FormGroup } from '@angular/forms';
import { Observable } from 'rxjs';
import { map, startWith } from 'rxjs/operators';
@Component({
selector: 'app-upload-main',
templateUrl: './upload-main.component.html',
styleUrls: ['./upload-main.component.scss']
})
export class UploadMainComponent implements OnInit {
suggestions: any;
constructor() { }
results: Observable<string[]>;
form: FormGroup;
ngOnInit(): void {
this.form = new FormGroup({
textAreaControlName: new FormControl('')
});
if (!this.suggestions) {
this.suggestions = [''];
}
this.results = this.form.controls.textAreaControlName.valueChanges.pipe(startWith('this is a suggestion'), map((value: string) => this.filter(value)));
}
filter(value: string): string[] {
let filterValue: string;
if (!value) {
filterValue = '';
} else {
filterValue = value.toLowerCase();
}
if (this.form.controls.textAreaControlName.value) {
return this.suggestions.filter((item: string) => item.toLowerCase().includes(filterValue));
} else {
return this.suggestions;
}
}
}
component.html
<div class="md-form mt-3">
<textarea
mdbInput
mdbValidate
[mdbAutoCompleter]="auto"
type="text"
class="completer-input mdb-autocomplete md-textarea form-control">
</textarea>
<mdb-auto-completer [disabled]="disabled" #auto="mdbAutoCompleter" textNoResults="" [clearButton]="true" [appendToBody]="true">
<mdb-option *ngFor="let option of results | async" [value]="option">
<div class="d-flex justify-content-left align-items-center w-100">
<mdb-icon *ngIf="multipleSelected" far icon="images" class="align-self-center mx-1"> </mdb-icon>
<span class="align-self-center mx-1">{{ option }}</span>
</div>
</mdb-option>
</mdb-auto-completer>
</div>
Arkadiusz Idzikowski staff commented 4 years ago
@photerloo Thank you for the details, we managed to reproduce the bug using your code.
It looks like the problem only occurs when the appendToBody option is used. We still need more time to find the real cause of the problem. If this option is not necessary in your case, please set it to false as a workaround for now.
photerloo pro premium commented 4 years ago
@Arkadiusz Idzikowski I have confirmed that setting appentToBody to false fixes the issue but I have the autocomlete component within a mdb-accordion-item and it cuts off when I set appendToBody=false (see this screenshot https://drive.google.com/file/d/1ciEOZT_o7duXUrKIYs0DwCqXoGYR4NSc/view?usp=drivesdk) Do you have an estimated timeframe for a fix?
Arkadiusz Idzikowski staff commented 4 years ago
@photerloo We can't provide an ETA yet. We will update the thread when we will have more information.
photerloo pro premium commented 4 years ago
@Arkadiusz Idzikowski Can I get a high level estimate like will it be days, weeks, months or years? We are experiencing the bug in production and it has made our app unusable in Firefox, so if it is going to take weeks or months before it is fixed then we will invest the time in replacing the mdbootstrap component with another component that works in firefox, let me know.
Arkadiusz Idzikowski staff commented 4 years ago
@photerloo We don't know the exact date yet, but we should release a new version within a month. When we find the cause of the problem and it will be possible to fix it with a temporary workaround, we will inform you about it in this thread.
photerloo pro premium commented 4 years ago
@Arkadiusz IdzikowskiAny update on this?
Arkadiusz Idzikowski staff commented 4 years ago
@photerloo The component should work correctly in v11.1.0. Please let us know if you encounter any further problems after the update.
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Resolved
- User: Pro
- Premium support: No
- Technology: MDB Angular
- MDB Version: 9.4.0
- Device: PC
- Browser: Firefox 79.0
- OS: Windows 10
- Provided sample code: No
- Provided link: No
Grzegorz Bujański staff commented 4 years ago
Hi. Unfortunately I am unable to reproduce this error. Please provide the code that causes this error.
photerloo pro premium commented 4 years ago
@Grzegorz Bujański I am having the same problem, I added my code below.