diff --git a/CHANGELOG.md b/CHANGELOG.md
index f4bb2225629..9f88dcf3155 100755
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,4 +1,32 @@
# Changelog
+## [17.6.0](https://github.com/primefaces/primeng/tree/17.6.0) (2024-02-07)
+
+[Full Changelog](https://github.com/primefaces/primeng/compare/17.5.0...17.6.0)
+
+**Implemented New Features and Enhancements:**
+- Dropdown | make clear method public for better DX [\#14641](https://github.com/primefaces/primeng/issues/14641)
+
+**Fixed bugs:**
+- MultiSelect: selectedItemsLabel is not localized (re-opened) [\#14554](https://github.com/primefaces/primeng/issues/14554)
+- Component: Calendar isn't show initial value from FormControl/ngModel [\#14616](https://github.com/primefaces/primeng/issues/14616)
+- Component: Dropdown removing a letter from filter that comes after a whitespace ' ' removes the whitespace [\#14701](https://github.com/primefaces/primeng/issues/14701)
+- Component: p-multiselect - double click on multiselect "button" causes modal window to jump around before disappearing [\#14442](https://github.com/primefaces/primeng/issues/14442)
+- Virtual Scroll Jumping Backwards [\#14298](https://github.com/primefaces/primeng/issues/14298)
+- p-dropdown: dropdown options float to the top when searching [\#14659](https://github.com/primefaces/primeng/issues/14659)
+- Dropdown: Key events not correctly working when filter is enabled [\#14189](https://github.com/primefaces/primeng/issues/14189)
+- Component: Dropdown| closing overlay on pressing enter key on filter input [\#14708](https://github.com/primefaces/primeng/issues/14708)
+- Component: p-Dropdown placeholder/values not displayed [\#14695](https://github.com/primefaces/primeng/issues/14695)
+- TreeSelect: When using reactive form disabled input doesn't affect [\#14662](https://github.com/primefaces/primeng/issues/14662)
+- MultiSelect: dynamic text in placeholder is not displayed [\#14321](https://github.com/primefaces/primeng/issues/14321)
+- Dropdown: dynamic text in placeholder is not displayed [\#14320](https://github.com/primefaces/primeng/issues/14320)
+- Component: Dropdown TypeError: option.toLowerCase is not a function [\#14682](https://github.com/primefaces/primeng/issues/14682)
+- Dropdown: "0" Value in optionValue, causes Label to be replaced by Placeholder [\#14715](https://github.com/primefaces/primeng/issues/14715)
+- The scrollToIndex method on VirtualScroller does not scroll to the correct index when triggered twice. [\#14731](https://github.com/primefaces/primeng/issues/14731)
+- Checkbox: Disabled property does not work when it's used with formControlName [\#14693](https://github.com/primefaces/primeng/issues/14693)
+- PrimeNg p-columnFilter does not close on outside element click or scroll or search submit [\#14658](https://github.com/primefaces/primeng/issues/14658)
+- Showcase | Remove stateful config [\#14752](https://github.com/primefaces/primeng/issues/14752)
+
+
## [17.5.0](https://github.com/primefaces/primeng/tree/17.5.0) (2024-02-01)
[Full Changelog](https://github.com/primefaces/primeng/compare/17.4.0...17.5.0)
@@ -242,6 +270,12 @@
- TypeError: this.focusedItemInfo.mutate is not a function [\#14119](https://github.com/primefaces/primeng/issues/14119)
- Upgrade to Angular 17? [\#14063](https://github.com/primefaces/primeng/issues/14063)
+## ![LTS](https://www.primefaces.org/wp-content/uploads/2020/01/lts-icon-24.png "PrimeNG LTS") [16.9.5-LTS](https://www.npmjs.com/package/primeng/v/16.9.5-lts) (2024-02-07)
+
+**Fixed bugs:**
+- The scrollToIndex method on VirtualScroller does not scroll to the correct index when triggered twice. [\#14731](https://github.com/primefaces/primeng/issues/14731)
+- Checkbox: Disabled property does not work when it's used with formControlName [\#14693](https://github.com/primefaces/primeng/issues/14693)
+
## ![LTS](https://www.primefaces.org/wp-content/uploads/2020/01/lts-icon-24.png "PrimeNG LTS") [16.9.4-LTS](https://www.npmjs.com/package/primeng/v/16.9.4-lts) (2024-01-19)
**Fixed bugs:**
@@ -789,6 +823,12 @@
- Checkbox in p-treeNode always checked when using custom icon [\#12951](https://github.com/primefaces/primeng/issues/12951)
- ConfirmDialog: Duplicated AcceptIcons [\#13001](https://github.com/primefaces/primeng/issues/13001)
+## ![LTS](https://www.primefaces.org/wp-content/uploads/2020/01/lts-icon-24.png "PrimeNG LTS") [15.4.16-LTS](https://www.npmjs.com/package/primeng/v/15.4.16-lts) (2024-02-07)
+
+**Fixed bugs:**
+- The scrollToIndex method on VirtualScroller does not scroll to the correct index when triggered twice. [\#14731](https://github.com/primefaces/primeng/issues/14731)
+- Checkbox: Disabled property does not work when it's used with formControlName [\#14693](https://github.com/primefaces/primeng/issues/14693)
+
## ![LTS](https://www.primefaces.org/wp-content/uploads/2020/01/lts-icon-24.png "PrimeNG LTS") [15.4.15-LTS](https://www.npmjs.com/package/primeng/v/15.4.15-lts) (2024-01-19)
**Fixed bugs:**
diff --git a/package.json b/package.json
index 86941ae4ea6..ed24dbe2932 100755
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
{
"name": "primeng",
- "version": "17.5.0",
+ "version": "17.6.0",
"license": "SEE LICENSE IN LICENSE.md",
"scripts": {
"ng": "ng",
diff --git a/src/app/components/api/translationkeys.ts b/src/app/components/api/translationkeys.ts
index ca48602cfa6..1c1f803cc23 100644
--- a/src/app/components/api/translationkeys.ts
+++ b/src/app/components/api/translationkeys.ts
@@ -43,5 +43,5 @@ export class TranslationKeys {
public static readonly EMPTY_FILTER_MESSAGE = 'emptyFilterMessage';
public static readonly SHOW_FILTER_MENU = 'showFilterMenu';
public static readonly HIDE_FILTER_MENU = 'hideFilterMenu';
- public static readonly SELECTION_MESSAGE = '{0} items selected';
+ public static readonly SELECTION_MESSAGE = 'selectionMessage';
}
diff --git a/src/app/components/calendar/calendar.ts b/src/app/components/calendar/calendar.ts
index 311bf6f2ecb..ce28618cce4 100755
--- a/src/app/components/calendar/calendar.ts
+++ b/src/app/components/calendar/calendar.ts
@@ -3016,9 +3016,7 @@ export class Calendar implements OnInit, OnDestroy, ControlValueAccessor {
}
}
}
- if (this.dataType === 'string') {
- this.updateModel(value);
- }
+
this.updateInputfield();
this.updateUI();
this.cd.markForCheck();
diff --git a/src/app/components/dropdown/dropdown.ts b/src/app/components/dropdown/dropdown.ts
index 029b537cb6e..54c58442874 100755
--- a/src/app/components/dropdown/dropdown.ts
+++ b/src/app/components/dropdown/dropdown.ts
@@ -886,7 +886,7 @@ export class Dropdown implements OnInit, AfterViewInit, AfterContentInit, AfterV
return {
'p-dropdown-label p-inputtext': true,
'p-placeholder': this.placeholder() && label === this.placeholder(),
- 'p-dropdown-label-empty': !this.editable && !this.selectedItemTemplate && (!label || label === 'p-emptylabel' || label.length === 0)
+ 'p-dropdown-label-empty': !this.editable && !this.selectedItemTemplate && (label === undefined || label === null || label === 'p-emptylabel' || label.length === 0)
};
}
@@ -912,11 +912,11 @@ export class Dropdown implements OnInit, AfterViewInit, AfterContentInit, AfterV
!_filterBy && !this.filterFields && !this.optionValue
? this.options.filter((option) => {
if (option.label) {
- return option.label.toLowerCase().indexOf(this._filterValue().toLowerCase()) !== -1;
+ return option.label.toLowerCase().indexOf(this._filterValue().toLowerCase().trim()) !== -1;
}
- return option.toLowerCase().indexOf(this._filterValue().toLowerCase()) !== -1;
+ return option.toLowerCase().indexOf(this._filterValue().toLowerCase().trim()) !== -1;
})
- : this.filterService.filter(options, this.searchFields(), this._filterValue(), this.filterMatchMode, this.filterLocale);
+ : this.filterService.filter(options, this.searchFields(), this._filterValue().trim(), this.filterMatchMode, this.filterLocale);
if (this.group) {
const optionGroups = this.options || [];
@@ -939,6 +939,7 @@ export class Dropdown implements OnInit, AfterViewInit, AfterContentInit, AfterV
label = computed(() => {
const selectedOptionIndex = this.findSelectedOptionIndex();
+
return selectedOptionIndex !== -1 ? this.getOptionLabel(this.visibleOptions()[selectedOptionIndex]) : this.placeholder() || 'p-emptylabel';
});
@@ -1773,13 +1774,13 @@ export class Dropdown implements OnInit, AfterViewInit, AfterContentInit, AfterV
}
onFilterInputChange(event: Event | any): void {
- let value: string = (event.target as HTMLInputElement).value?.trim();
+ let value: string = (event.target as HTMLInputElement).value;
this._filterValue.set(value);
this.focusedOptionIndex.set(-1);
this.onFilter.emit({ originalEvent: event, filter: this._filterValue() });
!this.virtualScrollerDisabled && this.scroller.scrollToIndex(0);
setTimeout(() => {
- this.overlayViewChild.alignOverlay()
+ this.overlayViewChild.alignOverlay();
});
this.cd.markForCheck();
}
diff --git a/src/app/components/inputtextarea/inputtextarea.ts b/src/app/components/inputtextarea/inputtextarea.ts
index 2ba3ee128e5..87cf924c2f0 100755
--- a/src/app/components/inputtextarea/inputtextarea.ts
+++ b/src/app/components/inputtextarea/inputtextarea.ts
@@ -14,7 +14,7 @@ import { Subscription } from 'rxjs';
'[class.p-inputtextarea-resizable]': 'autoResize'
}
})
-export class InputTextarea implements OnInit, AfterViewInit, AfterViewChecked, OnDestroy {
+export class InputTextarea implements OnInit, AfterViewInit, OnDestroy {
/**
* When present, textarea size changes as being typed.
* @group Props
@@ -51,10 +51,6 @@ export class InputTextarea implements OnInit, AfterViewInit, AfterViewChecked, O
}
}
- ngAfterViewChecked() {
- this.updateState();
- }
-
ngAfterViewInit() {
if (this.autoResize) this.resize();
diff --git a/src/app/components/multiselect/multiselect.ts b/src/app/components/multiselect/multiselect.ts
index 51fc8931029..e51a28054d1 100755
--- a/src/app/components/multiselect/multiselect.ts
+++ b/src/app/components/multiselect/multiselect.ts
@@ -177,7 +177,7 @@ export class MultiSelectItem {
- {{ placeholder || defaultLabel || 'empty' }}
+ {{ placeholder() || defaultLabel || 'empty' }}
@@ -518,7 +518,7 @@ export class MultiSelect implements OnInit, AfterViewInit, AfterContentInit, Aft
* Label to display after exceeding max selected labels e.g. ({0} items selected), defaults "ellipsis" keyword to indicate a text-overflow.
* @group Props
*/
- @Input() selectedItemsLabel: string = '{0} items selected';
+ @Input() selectedItemsLabel: string | undefined;
/**
* Whether to show the checkbox at header to toggle all items at once.
* @group Props
@@ -976,6 +976,8 @@ export class MultiSelect implements OnInit, AfterViewInit, AfterContentInit, Aft
selectedOptions: any;
+ clickInProgress: boolean = false;
+
get containerClass() {
return {
'p-multiselect p-component p-inputwrapper': true,
@@ -1692,7 +1694,7 @@ export class MultiSelect implements OnInit, AfterViewInit, AfterContentInit, Aft
}
onContainerClick(event: any) {
- if (this.disabled || this.readonly || (event.target).isSameNode(this.focusInputViewChild?.nativeElement)) {
+ if (this.disabled || this.readonly || (event.target as Node).isSameNode(this.focusInputViewChild?.nativeElement)) {
return;
}
@@ -1700,6 +1702,16 @@ export class MultiSelect implements OnInit, AfterViewInit, AfterContentInit, Aft
event.preventDefault();
return;
} else if (!this.overlayViewChild || !this.overlayViewChild.el.nativeElement.contains(event.target)) {
+ if (this.clickInProgress) {
+ return;
+ }
+
+ this.clickInProgress = true;
+
+ setTimeout(() => {
+ this.clickInProgress = false;
+ }, 150);
+
this.overlayVisible ? this.hide(true) : this.show(true);
}
this.focusInputViewChild?.nativeElement.focus({ preventScroll: true });
@@ -1735,7 +1747,7 @@ export class MultiSelect implements OnInit, AfterViewInit, AfterContentInit, Aft
}
onFilterInputChange(event: KeyboardEvent) {
- let value: string = (event.target as HTMLInputElement).value?.trim();
+ let value: string = (event.target as HTMLInputElement).value;
this._filterValue.set(value);
this.focusedOptionIndex.set(-1);
this.onFilter.emit({ originalEvent: event, filter: this._filterValue() });
diff --git a/src/app/components/package.json b/src/app/components/package.json
index cee5282f334..9468b002cce 100644
--- a/src/app/components/package.json
+++ b/src/app/components/package.json
@@ -1,6 +1,6 @@
{
"name": "primeng",
- "version": "17.5.0",
+ "version": "17.6.0",
"repository": {
"type": "git",
"url": "https://github.com/primefaces/primeng"
diff --git a/src/app/showcase/data/versions.json b/src/app/showcase/data/versions.json
index c7ff02b2b20..da9c2ad68bb 100644
--- a/src/app/showcase/data/versions.json
+++ b/src/app/showcase/data/versions.json
@@ -1,16 +1,16 @@
[
{
- "version": "v17.5.0",
+ "version": "v17.6.0",
"name": "v17",
"url": "https://primeng.org"
},
{
- "version": "v16.9.3-lts",
+ "version": "v16.9.5-lts",
"name": "v16",
"url": "https://www.primefaces.org/primeng-v16-lts/"
},
{
- "version": "v15.4.14-lts",
+ "version": "v15.4.16-lts",
"name": "v15",
"url": "https://www.primefaces.org/primeng-v15-lts/#/"
},
diff --git a/src/app/showcase/layout/doc/app.docsection-nav.component.ts b/src/app/showcase/layout/doc/app.docsection-nav.component.ts
index 31e17a8e223..3c9bf1b2d90 100644
--- a/src/app/showcase/layout/doc/app.docsection-nav.component.ts
+++ b/src/app/showcase/layout/doc/app.docsection-nav.component.ts
@@ -92,7 +92,7 @@ export class AppDocSectionNavComponent implements OnInit, OnDestroy {
return [...Array.from(this.document.querySelectorAll(':is(h1,h2,h3).doc-section-label'))].filter((el: any) => DomHandler.isVisible(el));
}
- onScroll() {
+ onScroll() {
if (isPlatformBrowser(this.platformId) && this.nav) {
if (!this.isScrollBlocked) {
this.zone.run(() => {
diff --git a/src/app/showcase/layout/doc/codeeditor/templates.ts b/src/app/showcase/layout/doc/codeeditor/templates.ts
index ef1df9cfeb4..748ba555e21 100644
--- a/src/app/showcase/layout/doc/codeeditor/templates.ts
+++ b/src/app/showcase/layout/doc/codeeditor/templates.ts
@@ -15,7 +15,7 @@ export interface Props {
const app_dependencies = pkg ? pkg.devDependencies : {};
const PrimeNG = {
- version: '17.5.0',
+ version: '17.6.0',
description:
'PrimeNG is an open source UI library for Angular featuring a rich set of 80+ components, a theme designer, various theme alternatives such as Material, Bootstrap, Tailwind, premium templates and professional support. In addition, it integrates with PrimeBlock, which has 370+ ready to use UI blocks to build spectacular applications in no time.'
};