Ability to clear listbox filter

[orwtech]

There is no guarantee in receiving a response in GitHub Issue Tracker, If you'd like to secure our response, you may consider PrimeNG PRO Support where support is provided within 4 business hours

I'm submitting a bug report to Listbox component to be able to clear the filter input text when the listbox.filterValue is set to '', undefined, null... (check one with "x")

When listbox.filterValue = '' I would expect the component to react and clear the wrapped Input value.

Please advice on how to do this if this by design

[x] bug report => Search github for a similar issue or PR before submitting
[ ] feature request => Please check if request is not on the roadmap already https://github.com/primefaces/primeng/wiki/Roadmap
[ ] support request => Please do not submit support request here, instead see http://forum.primefaces.org/viewforum.php?f=35

Plunkr Case (Bug Reports)
Please fork the plunkr below and create a case demonstrating your bug report. Issues without a plunkr have much less possibility to be reviewed.

http://plnkr.co/edit/6q5v84DWolH6DeAdi70w?p=preview

Current behavior

Expected behavior

Minimal reproduction of the problem with instructions

What is the motivation / use case for changing the behavior?

Please tell us about your environment:

• Angular version: 4.3.X

• PrimeNG version: 2.0.X

• Browser: [all | Chrome XX | Firefox XX | IE XX | Safari XX | Mobile Chrome XX | Android X.X Web Browser | iOS XX Safari | iOS XX UIWebView | iOS XX WKWebView ]

• Language: [all | TypeScript X.X | ES6/7 | ES5]

• Node (for AoT issues): node --version =

[ochiers]

I have the same issue.

When my listbox's filter is set to a value and that I want to reset this,
I set the filterValue to an empty string then the old value is still display.

• Angular version: 4.3.X

• PrimeNG version: 4.3.X

Sorry for my english.

[petewins]

My work around was to use ViewChild and ElementRef to set input value to ' '. Please advise if there is a better solution

[orwtech]

@petewins

Please share source on how to implement ViewChild and ElementRef work around

[petewins]

@orwtech, I have found a cleaner workaround, add ngIf to this component to reinitialize it when you want to empty the value. Since it is binded using ngModel, the data should not change.
html
<p-listbox *ngIf="listBox">
<a (click)=clearText()> clear

component
listbox = true
clearText() { ... this.listBox = false; setTimeout(() => (this.listBox = true), 0); }

[schepuri2012]

I am using 7.1.3 release and I am still unable to clear the input filter value even after binding a model attribute it to the new "filterValue" attribute.

[tundisto]

@orwtech @schepuri2012

For those who still aren't able to clear the filter value:

HTML:

<p-listbox #myListbox [options]="myOptions" [(ngModel)]="myModel" [filter]="true"></p-listbox>

Code:

import { ViewChild } from '@angular/core';
import { Listbox } from 'primeng/listbox';

@Component({
  selector: 'my-component',
  templateUrl: './my-component.component.html'
})

export class MyComponent {

  @ViewChild('myListbox') myListboxComponent: Listbox;

  resetMethod() {
    // trigger me somewhere in your template
    this.myListboxComponent._filterValue = '';
  }

}

[zjs10443]

@tundisto this worked in 9.## but after upgrading to 12 its not working

[0m3rF]

I am working with primeng 15.2.0 and below code has worked for me.

<button ... (click)="clearListboxFilter(listbox)"></button>
<p-listbox #listbox ... > </p-listbox>

clearListboxFilter(listbox: any) {
    listbox._filterValue = "";
    listbox.activateFilter();
    listbox.cd.detectChanges();
  }