Mdb-auto-completer issue in Firefox


Topic: Mdb-auto-completer issue in Firefox

bitjuice pro asked 7 months ago

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


Grzegorz Bujański staff commented 7 months ago

Hi. Unfortunately I am unable to reproduce this error. Please provide the code that causes this error.


photerloo pro premium commented 2 weeks ago

@Grzegorz Bujański I am having the same problem, I added my code below.


photerloo pro premium answered 2 weeks ago

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 2 weeks 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?


photerloo pro premium answered 2 weeks ago

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 2 weeks 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 2 weeks 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 2 weeks ago

@photerloo We can't provide an ETA yet. We will update the thread when we will have more information.


photerloo pro premium commented a week 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 a week 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.


Please insert min. 20 characters.
Status

Answered

Specification of the issue
  • User: Pro
  • Premium support: No
  • Technology: Angular
  • MDB Version: 9.4.0
  • Device: PC
  • Browser: Firefox 79.0
  • OS: Windows 10
  • Provided sample code: No
  • Provided link: No