diff --git a/packages/primevue/src/multiselect/BaseMultiSelect.vue b/packages/primevue/src/multiselect/BaseMultiSelect.vue index a8a6bc616..ccdff789e 100644 --- a/packages/primevue/src/multiselect/BaseMultiSelect.vue +++ b/packages/primevue/src/multiselect/BaseMultiSelect.vue @@ -38,6 +38,18 @@ export default { default: null }, dataKey: null, + showClear: { + type: Boolean, + default: false + }, + clearIcon: { + type: String, + default: undefined + }, + resetFilterOnClear: { + type: Boolean, + default: false + }, filter: Boolean, filterPlaceholder: String, filterLocale: String, diff --git a/packages/primevue/src/multiselect/MultiSelect.d.ts b/packages/primevue/src/multiselect/MultiSelect.d.ts index 450a01c37..a5b11320a 100755 --- a/packages/primevue/src/multiselect/MultiSelect.d.ts +++ b/packages/primevue/src/multiselect/MultiSelect.d.ts @@ -131,6 +131,10 @@ export interface MultiSelectPassThroughOptions { * Used to pass attributes to the label's DOM element. */ label?: MultiSelectPassThroughOptionType; + /** + * Used to pass attributes to the label's DOM element. + */ + clearIcon?: MultiSelectPassThroughOptionType; /** * Used to pass attributes to the chip's DOM element. */ @@ -407,6 +411,20 @@ export interface MultiSelectProps { * A property to uniquely identify an option. */ dataKey?: string | undefined; + /** + * When enabled, a clear icon is displayed to clear the value. + * @defaultValue false + */ + showClear?: boolean | undefined; + /** + * Icon to display in clear button. + */ + clearIcon?: string | undefined; + /** + * Clears the filter value when clicking on the clear icon. + * @defaultValue false + */ + resetFilterOnClear?: boolean; /** * When specified, displays a filter input at header. * @defaultValue false @@ -803,6 +821,17 @@ export interface MultiSelectSlots { */ class: string; }): VNode[]; + /** + * Custom clear icon template. + * @param {Object} scope - clear icon slot's params. + */ + clearicon(scope: { + /** + * Clear icon click function. + * @param {Event} event - Browser event + */ + clearCallback: (event: Event) => void; + }): VNode[]; /** * Custom dropdown icon template. * @param {Object} scope - dropdownicon slot's params. diff --git a/packages/primevue/src/multiselect/MultiSelect.vue b/packages/primevue/src/multiselect/MultiSelect.vue index ef8171d06..e41e677d4 100755 --- a/packages/primevue/src/multiselect/MultiSelect.vue +++ b/packages/primevue/src/multiselect/MultiSelect.vue @@ -50,6 +50,9 @@ + + +