Topic: Autocomplete doesn't function with updateOn: 'submit'

Dave Moniz priority asked 2 years ago


Expected behavior

Allowed to use updateOn: 'submit'

Actual behavior

Not this ^^^ -- it works fine if updateOn is not set


Arkadiusz Idzikowski staff commented 2 years ago

@Dave Moniz Thank you for reporting this problem. I tested that and I managed to reproduce the incorrect behavior. We will take a closer look at that and let you know what we found.


Dave Moniz priority answered 2 years ago


I think you meant to update a different ticket, your response has nothing to do with the question asked.

It's 2 months old and I no longer work on the affected project so I can't verify if a solution has been provided yet, but you can see this was replicated by @Arkadiusz Idzikowski already.

At no point do you reference autocomplete in your response. The question is specific to autocomplete functionality. Where at the time of asking if you specify updateOn: 'submit' for the formControl of the autocomplete then the autocomplete will not function correctly (does not drop down, populate, etc) but if you leave it unset it is fine.


Arkadiusz Idzikowski staff commented 2 years ago

@Dave Moniz Sorry for the inconvenience, it seems that for some reason I automatically assumed that the reported bug was related to the component input validation (and in fact, such a problem occurs when input is not manually marked as touched, that's why I confirmed bug and added this to our to-do list).

I'm afraid it is not possible to change the behavior of the filter function for different states of the updateOn option on our end. We need to update the options list accordingly to input value and different updateOn settings completely change how this value is updated. As a workaround, you could try to call the filter function and update results list on input keyup event, but in this case input value will be out of sync with underlying form control value.


Dave Moniz priority commented 2 years ago

Interesting, thanks for the information. I had found my own work around for what I needed back then. But we'll leave this here marked as resolved for the next person who gets stuck


Michał Duszak staff answered 2 years ago


I assume your success/error messages are being rendered conditionally like this:

<mdb-error *ngIf="input?.invalid && (input?.dirty || input?.touched)"
      >Input value is required</mdb-error
    >
    <mdb-success *ngIf="input?.valid && (input?.dirty || input?.touched)"
      >Looks good!</mdb-success
    >

Validation problem with untouched input should be resolved via adding onSubmit method in which markAllAsTouched() should be executed on the FormGroup. Here is an example:

template:

<form [formGroup]="validationFormGroup" (ngSubmit)="onSubmit()">
 ...
</form>

component.ts:

export class ValidationComponent {
  ...
  onSubmit(): void {
    this.submitValidationForm.markAllAsTouched();
  }
}


Please insert min. 20 characters.

FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.

Status

Resolved

Specification of the issue

  • ForumUser: Priority
  • Premium support: Yes
  • Technology: MDB Angular
  • MDB Version: MDB5 1.3.0
  • Device: PC
  • Browser: Google Chrome
  • OS: Arch Linux
  • Provided sample code: Yes
  • Provided link: No