PrimeNg DropDown - User can't clear the value

Question

I'm implementing primeNg dropdown component in my Angular2 application.

<p-dropdown [options]="listCustomers_itm" placeholder="Selezionare" [(ngModel)]="Customer_itm" [ngModelOptions]="{standalone: true}" [style]="{'width':'225px'}" filter="filter"  (onChange)="onCustomerSelect($event.value)">
</p-dropdown>

All works fine except one annoing thing:

Once time the user has selected an option, he can't clear the selected value...

Can you help me?

Like most dropdowns that doesn't come out of the box, you have to provide your own button, which clears it programmatically. — PeterS, May 31 '17 at 14:54
Thanks Peter, I think its the only solution without extending the object... — DarioN1, May 31 '17 at 15:06
I think so, to give you an example, check this other stackoverflow post. It's not using primeNg, however you can get some ideas from the plunks. https://stackoverflow.com/questions/26389542/clear-selected-option-in-ui-select-angular — PeterS, May 31 '17 at 16:08

score 14 · Answer 1 · edited Oct 17 '18 at 20:23

14

[showClear]="true" OR editable="true" Please add showClear property or editable property based on your requirement. This works perfectly for your use case

edited Oct 17 '18 at 20:23

askilondz

3,264
2
28
40

answered Oct 17 '18 at 17:41

user2566954

141
1
4

Why isn't it documented in primeng documentation? – Jon Jul 23 '19 at 06:35
This is answer could use more context – Chad Nov 21 '19 at 22:19
At least now it is documented in primeng, and it works. – trueunlessfalse Jul 22 '21 at 09:29

score 7 · Accepted Answer · answered Jul 07 '17 at 16:49

7

To fix this, I had to set a placeholder for the dropdown. The code I used is something like:

template.html

<p-dropdown ...
            placeholder="Select"
            #dropDownThing></p-dropdown>

<button (click)="onButtonClick()"></button>

component.ts

import { Dropdown } from "primeng/components/dropdown/dropdown";
...
@ViewChild('dropDownThing')
dropDownThing: Dropdown;
...
onButtonClick() {
    this.dropDownThing.value = <someValueNotInTheDropdown'sList>;
}
...

When the code above is run without a placeholder, the currently-selected option remains selected.

When the code above is run with a placeholder, the dropdown's value changes to the provided placeholder.

answered Jul 07 '17 at 16:49

Daniel Neel

1,197
13
28

1

@ViewChild isn't needed if the only goal is to reset the dropdown value. Please see my answer below. – Stevethemacguy Sep 15 '17 at 19:32
2

Depending on the version of PrimeNg, you can set autoDisplayFirst to false and showClear to true for the same effect, I believe. [showClear]="true" [autoDisplayFirst]="false" – Josh Aug 16 '19 at 19:18
can use resetFilter(); in case u want to clear via object – jaibalaji Feb 10 '21 at 13:48
Problem with using placeholder is if you are also using a custom template. Meaning you can't have both. Which is odd, poor engineering. – Victor Zakharov May 06 '22 at 11:34
This is expected behaviour, as there is this option `autoDisplayFirst` in the docs. The situation is exactly '5 days of debugging saves 5 minutes of reading the documentaion'. – Aleksandar Angelov Oct 29 '22 at 10:58

Stevethemacguy · Answer 3 · 2017-09-15T19:38:29.083

To clear the selected dropdown value, just set the selected option to an empty string. For example, here's a drop-down that let's the user select "Last Month" or "Last Week:"

Component

ngOnInit() {
    // Initialize drop-down values
    this.ranges = [];
    this.ranges.push({label: 'Last Month', value: 'Last Month'});
    this.ranges.push({label: 'Last Week', value: 'Last Week'});
}

clearDropDown = () => {
  this.selectedRange = '';
};

Template:

<p-dropdown 
    [options]="ranges" 
    [(ngModel)]="selectedRange" 
    placeholder="Select a Date Range">
</p-dropdown>

<button (click)="clearDropDown()">Clear Date Range</button>

If 'Last Month' is currently selected in the dropdown, clicking the button will clear the dropdown value (and 'Select a Date Range' will once again be shown).

PS: In this example, 'Select a Date Range' is placeholder text. It is not a selectable option from the dropdown. In most cases, this is what you want.

if you have one more p-dropdowns the previous filter value wll be set to Select a Date Range, which has to be the value of the filter I selected before, until I clear all values — Janatbek Orozaly, Aug 08 '18 at 02:34

score 5 · Answer 4 · answered Apr 30 '20 at 22:50

Had to dig into the source code a little to find, since it's not in the documentation, but the updateSelectedOption method did the trick for me. None of the other answers worked in our case. We have a "custom" option (opens a calendar selection tool), which needed to be selectable every time.

template:

<p-dropdown #dateDropdown [options]="dateOptions" [(ngModel)]="selectedDate"></p-dropdown>
<button (click)="clearSelection(dateDropdown)"></button>

component:

clearSelection(dropdown) {    
    dropdown.updateSelectedOption(null);
}

score 0 · Answer 5 · answered Jul 17 '20 at 14:16

0

In my case (primeng version 9.1.3) setting optionLabel fixed this issue.

answered Jul 17 '20 at 14:16

Trolejbus

115
4

score 0 · Answer 6 · answered Aug 06 '23 at 19:52

0

You can set the properties showClear and autoDisplayFirst to true.

You can find the documentation here

<p-dropdown
    [options]="options"
    [showClear]="true"
    [autoDisplayFirst]="false"
></p-dropdown>

answered Aug 06 '23 at 19:52

maheryhaja

1,617
11
18

score -1 · Answer 7 · answered Feb 23 '22 at 16:04

-1

Add in the options {label: 'none', value: null}

answered Feb 23 '22 at 16:04

Eric

75
2
5

Will not work with custom binding and template. – Victor Zakharov May 06 '22 at 11:40

score -3 · Answer 8 · answered Jun 07 '17 at 07:07

-3

Since the component is not allowing reset value function, I have implemented a button in the form the clear all the values...

It works properly

answered Jun 07 '17 at 07:07

DarioN1

2,460
7
32
67

4

so what does your button do? – Janatbek Orozaly Aug 08 '18 at 02:02
it just reset the binded value, thats it. It set it to null, in this way the user can reset the value – DarioN1 Nov 22 '19 at 09:33

PrimeNg DropDown - User can't clear the value

8 Answers8

Linked