Fixed #2664 - MultiSelect | resetFilterOnHide property

pull/2665/head
Tuğçe Küçükoğlu 2022-06-14 11:44:47 +03:00
parent db6c50e87a
commit 207b27f41e
5 changed files with 28 additions and 27 deletions

View File

@ -179,12 +179,18 @@ const MultiSelectProps = [
default: "false", default: "false",
description: "Whether all data is selected." description: "Whether all data is selected."
}, },
{
name: "resetFilterOnHide",
type: "boolean",
default: "false",
description: "Clears the filter value when hiding the dropdown."
},
{ {
name: "virtualScrollerOptions", name: "virtualScrollerOptions",
type: "object", type: "object",
default: "null", default: "null",
description: "Whether to use the virtualScroller feature. The properties of VirtualScroller component can be used like an object in it." description: "Whether to use the virtualScroller feature. The properties of VirtualScroller component can be used like an object in it."
} },
]; ];
const MultiSelectEvents = [ const MultiSelectEvents = [

View File

@ -182,15 +182,19 @@ export interface MultiSelectProps {
* Default value is 'pi pi-spinner pi-spin'. * Default value is 'pi pi-spinner pi-spin'.
*/ */
loadingIcon?: string | undefined; loadingIcon?: string | undefined;
/**
* Whether all data is selected.
*/
selectAll?: boolean | undefined;
/**
* Clears the filter value when hiding the dropdown.
*/
resetFilterOnHide?: boolean;
/** /**
* Whether to use the virtualScroller feature. The properties of VirtualScroller component can be used like an object in it. * Whether to use the virtualScroller feature. The properties of VirtualScroller component can be used like an object in it.
* @see VirtualScroller.VirtualScrollerProps * @see VirtualScroller.VirtualScrollerProps
*/ */
virtualScrollerOptions?: VirtualScrollerProps; virtualScrollerOptions?: VirtualScrollerProps;
/**
* Whether all data is selected.
*/
selectAll?: boolean | undefined;
} }
export interface MultiSelectSlots { export interface MultiSelectSlots {

View File

@ -184,16 +184,16 @@ export default {
type: String, type: String,
default: 'pi pi-spinner pi-spin' default: 'pi pi-spinner pi-spin'
}, },
virtualScrollerOptions: {
type: Object,
default: null
},
selectAll: { selectAll: {
type: Boolean, type: Boolean,
default: null default: null
}, },
clearFilterOnHide: { resetFilterOnHide: {
type: Boolean, type: Boolean,
default: false
},
virtualScrollerOptions: {
type: Object,
default: null default: null
} }
}, },
@ -290,7 +290,7 @@ export default {
hide() { hide() {
this.$emit('before-hide'); this.$emit('before-hide');
this.overlayVisible = false; this.overlayVisible = false;
if (this.clearFilterOnHide) { if (this.resetFilterOnHide) {
this.filterValue = null; this.filterValue = null;
} }
}, },

View File

@ -27,7 +27,7 @@
</MultiSelect> </MultiSelect>
<h5>Advanced with Templating and Filtering</h5> <h5>Advanced with Templating and Filtering</h5>
<MultiSelect ref="advancedMultiselect" v-model="selectedCountries" :options="countries" optionLabel="name" placeholder="Select Countries" :filter="true" :clearFilterOnHide="false" class="multiselect-custom"> <MultiSelect v-model="selectedCountries" :options="countries" optionLabel="name" placeholder="Select Countries" :filter="true" class="multiselect-custom">
<template #value="slotProps"> <template #value="slotProps">
<div class="country-item country-item-value" v-for="option of slotProps.value" :key="option.code"> <div class="country-item country-item-value" v-for="option of slotProps.value" :key="option.code">
<img src="../../assets/images/flag_placeholder.png" :class="'flag flag-' + option.code.toLowerCase()" /> <img src="../../assets/images/flag_placeholder.png" :class="'flag flag-' + option.code.toLowerCase()" />
@ -43,11 +43,6 @@
<div>{{slotProps.option.name}}</div> <div>{{slotProps.option.name}}</div>
</div> </div>
</template> </template>
<template #footer="">
<div class="py-2">
<Button label="Clear filter" @click="clearAdvancedTemplatingFilterInput" />
</div>
</template>
</MultiSelect> </MultiSelect>
<h5>Loading State</h5> <h5>Loading State</h5>
@ -74,7 +69,6 @@ export default {
selectedGroupedCities: null, selectedGroupedCities: null,
selectedItems: null, selectedItems: null,
selectAll: false, selectAll: false,
// clearFilterOnHide: false,
cities: [ cities: [
{name: 'New York', code: 'NY'}, {name: 'New York', code: 'NY'},
{name: 'Rome', code: 'RM'}, {name: 'Rome', code: 'RM'},
@ -131,9 +125,6 @@ export default {
}, },
onChange(event) { onChange(event) {
this.selectAll = event.value.length === this.items.length this.selectAll = event.value.length === this.items.length
},
clearAdvancedTemplatingFilterInput() {
this.$refs.advancedMultiselect.clearFilter()
} }
}, },
components: { components: {

View File

@ -327,17 +327,17 @@ export default {
<td>false</td> <td>false</td>
<td>Whether all data is selected.</td> <td>Whether all data is selected.</td>
</tr> </tr>
<tr>
<td>resetFilterOnHide</td>
<td>boolean</td>
<td>false</td>
<td>Clears the filter value when hiding the dropdown.</td>
</tr>
<tr> <tr>
<td>virtualScrollerOptions</td> <td>virtualScrollerOptions</td>
<td>object</td> <td>object</td>
<td>null</td> <td>null</td>
<td>Whether to use the virtualScroller feature. The properties of <router-link to="/virtualscroller">VirtualScroller</router-link> component can be used like an object in it.</td> <td>Whether to use the virtualScroller feature. The properties of <router-link to="/virtualscroller">VirtualScroller</router-link> component can be used like an object in it.</td>
</tr>
<tr>
<td>clearFilterOnHide</td>
<td>boolean</td>
<td>false</td>
<td>Whether to clear filterInput when the overlay is hidden.</td>
</tr> </tr>
</tbody> </tbody>
</table> </table>