AutoCompleter clearButton

Topic: AutoCompleter clearButton

NCIIT asked 5 years ago

Expected behavior

when using (clearBtnClicked)="onClearButtonClick()" Event emitted when clear button is clicked

Actual behavior

Nothing happens when ClearButton clicked - icon type=button actually not represents button Also adding clearButton="false" not removes clearButton

Resources (screenshots, code snippets etc.)

*.html

<div class="md-form">
                                <input
                                        formControlName="vehicleManufacturer"
                                        id="vehicleManufacturer"
                                        aria-label="Vehicle Manufacturer"
                                        type="text"
                                        class="completer-input form-control mdb-autocomplete mb-0"
                                        [mdbAutoCompleter]="autocomplete"
                                        placeholder="Choose your Vehicle Manufacturer"
                                        (clearBtnClicked)="onClearButtonClick()"
                                        autocomplete="off"
                                />
                                <mdb-auto-completer
                                        [displayValue]="onDisplayValue"
                                        #autocomplete="mdbAutoCompleter" textNoResults="I have found no results :("
                                                    (selected)="onItemSelect($event)">
                                    <mdb-option *ngFor="let option of makeAutocompleteResults | async" [value]="option">
                                        {{ option.description }}
                                    </mdb-option>
                                </mdb-auto-completer>
                            </div>

.ts

onClearButtonClick() {
    console.log('Clear...');
}

Add comment

Bartosz Termena staff answered 5 years ago

0 0 Best answer

Dear @NCIIT

In my example below, clearBtnClicked works as it should.

<form [formGroup]="testForm">
  <div class="md-form">
    <input
      formControlName="testAutocomplete"
      type="text"
      class="completer-input form-control mdb-autocomplete mb-0"
      [mdbAutoCompleter]="auto"
      (clearBtnClicked)="onClearButtonClick()"
      autocomplete="off"
      placeholder="Choose your color"
    />
    <mdb-auto-completer #auto="mdbAutoCompleter" [clearButton]="false" textNoResults="I have found no results :(">
      <mdb-option *ngFor="let option of results | async" [value]="option">
        {{ option }}
      </mdb-option>
    </mdb-auto-completer>
  </div>
</form>

TS:

  results: Observable<string[]>;
  data: any = ['red', 'green', 'blue', 'cyan', 'magenta', 'yellow', 'black'];

  testForm: FormGroup;

  constructor() {}

  ngOnInit() {
    this.testForm = new FormGroup({
      testAutocomplete: new FormControl('red'),
    });

    this.results = this.testForm.controls.testAutocomplete.valueChanges.pipe(
      startWith('red'),
      map((value: string) => this.filter(value))
    );
  }

  filter(value: string): string[] {
    const filterValue = value.toLowerCase();
    return this.data.filter((item: any) => item.toLowerCase().includes(filterValue));
  }

  onClearButtonClick() {
    console.log('Clear...');
  }

Also, to hide clearButton try with [clearButton]="false" - we will correct our documentation as soon as possible.

Best Regards, Bartosz.

NCIIT commented 5 years ago

I have created test with your code and it's working, but it's still fails to generate clearButton code on main project, looking at elements source code I'm getting:

svg icon and commented button code

Bartosz Termena staff commented 5 years ago

Dear @NCIIT

What do you mean "fails to generate clearButton" ?

[clearButton]="false"

responds for not showing clear button - was that what you meant?

Best, Bartosz.

NCIIT commented 5 years ago

Hi Bartosz

using 'false' button not displayed and I think I have found what happens when button shows - I'm using FontAwesome Pro SVG with JavaScript, so when button created this script changes it to icon :( Regards, Egle

Add comment

NCIIT answered 5 years ago

0 0 Best answer

 <svg _ngcontent-xns-c9="" class="svg-inline--fa fa-times fa-w-11 mdb-autocomplete-clear" type="button" tabindex="0" style="position: absolute; top: 25%; right: 0px; visibility: visible;" aria-hidden="true" data-prefix="fa" data-icon="times" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 352 512" data-fa-i2svg="">
<path fill="currentColor" d="M242.72 256l100.07-100.07c12.28-12.28 12.28-32.19 0-44.48l-22.24-22.24c-12.28-12.28-32.19-12.28-44.48 0L176 189.28 75.93 89.21c-12.28-12.28-32.19-12.28-44.48 0L9.21 111.45c-12.28 12.28-12.28 32.19 0 44.48L109.28 256 9.21 356.07c-12.28 12.28-12.28 32.19 0 44.48l22.24 22.24c12.28 12.28 32.2 12.28 44.48 0L176 322.72l100.07 100.07c12.28 12.28 32.2 12.28 44.48 0l22.24-22.24c12.28-12.28 12.28-32.19 0-44.48L242.72 256z"></path>
</svg>
<!-- <button _ngcontent-xns-c9="" class="mdb-autocomplete-clear fa fa-times" type="button" tabindex="0" style="position: absolute; top: 25%; right: 0px; visibility: hidden;"></button> -->

Add comment

Closed

This topic is closed.

FREE CONSULTATION

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

Status

Closed

Specification of the issue

User: Free
Premium support: No
Technology: MDB Angular
MDB Version: 8.3.1
Device: Dell XPS
Browser: Chrome 77.0.3865.90
OS: Windows 10
Provided sample code: No
Provided link: No

NCIIT

49Support score
3Questions 4Answers

0Snippets likes 0Snippets