Merge branch 'master' into accessibility

primefaces · Nov 15, 2023 · 0aba850 · 0aba850
2 parents 7377950 + cc4e3f0
commit 0aba850
Show file tree

Hide file tree

Showing 15 changed files with 122 additions and 63 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -83,7 +83,7 @@
 
 ## [16.5.0](https://github.com/primefaces/primeng/tree/16.5.0) (2023-10-11)
 
-[Full Changelog](https://github.com/primefaces/primeng/compare/16.4.1...16.5.0)
+[Full Changelog](https://github.com/primefaces/primeng/compare/16.4.2...16.5.0)
 
 **Deprecated:**
 - SlideMenu: Deprecate from PrimeNG [\#13830](https://github.com/primefaces/primeng/issues/13830)
@@ -111,6 +111,15 @@
 - p-dialog: ExpressionChangedAfterItHasBeenCheckedError with attr.aria-labelledby [\#13636](https://github.com/primefaces/primeng/issues/13636)
 - Textarea: autoResize doesn't work when used inside a Dialog [\#9231](https://github.com/primefaces/primeng/issues/9231)
 
+## [16.4.2](https://github.com/primefaces/primeng/tree/16.4.2) (2023-11-10)
+
+[Full Changelog](https://github.com/primefaces/primeng/compare/16.4.1...16.4.2)
+
+**Fixed bugs:**
+
+- TreeTable | Global filter to search tree-table is not returning all the relevant results [\#14082](https://github.com/primefaces/primeng/issues/14082)
+- Dropdown | FocusTrap doesn't allow user to tab on next element [\#14083](https://github.com/primefaces/primeng/issues/14083)
+
 ## [16.4.1](https://github.com/primefaces/primeng/tree/16.4.1) (2023-09-27)
 
 [Full Changelog](https://github.com/primefaces/primeng/compare/16.4.0...16.4.1)

diff --git a/src/app/components/autocomplete/autocomplete.ts b/src/app/components/autocomplete/autocomplete.ts
@@ -1023,7 +1023,7 @@ export class AutoComplete implements AfterViewChecked, AfterContentInit, OnDestr
             return;
         }
 
-        if (!this.overlayViewChild || !this.overlayViewChild.overlayViewChild.nativeElement.contains(event.target)) {
+        if (!this.overlayViewChild || !this.overlayViewChild.overlayViewChild?.nativeElement.contains(event.target)) {
             DomHandler.focus(this.inputEL.nativeElement);
         }
     }
@@ -1240,6 +1240,7 @@ export class AutoComplete implements AfterViewChecked, AfterContentInit, OnDestr
         this.changeFocusedOptionIndex(event, optionIndex);
 
         event.preventDefault();
+        event.stopPropagation();
     }
 
     onArrowUpKey(event) {
@@ -1260,6 +1261,7 @@ export class AutoComplete implements AfterViewChecked, AfterContentInit, OnDestr
             this.changeFocusedOptionIndex(event, optionIndex);
 
             event.preventDefault();
+            event.stopPropagation();
         }
     }
 

diff --git a/src/app/components/chips/chips.ts b/src/app/components/chips/chips.ts
@@ -84,7 +84,7 @@ export const CHIPS_VALUE_ACCESSOR: any = {
                         (paste)="onPaste($event)"
                         (focus)="onInputFocus($event)"
                         (blur)="onInputBlur($event)"
-                        [disabled]="disabled || maxedOut"
+                        [disabled]="disabled || isMaxedOut"
                         [ngStyle]="inputStyle"
                         [class]="inputStyleClass"
                     />
@@ -101,7 +101,7 @@ export const CHIPS_VALUE_ACCESSOR: any = {
     host: {
         class: 'p-element p-inputwrapper',
         '[class.p-inputwrapper-filled]': 'filled',
-        '[class.p-inputwrapper-focus]': 'focus',
+        '[class.p-inputwrapper-focus]': 'focused',
         '[class.p-chips-clearable]': 'showClear'
     },
     providers: [CHIPS_VALUE_ACCESSOR],
@@ -263,7 +263,7 @@ export class Chips implements AfterContentInit, ControlValueAccessor {
         return this.focusedIndex !== null ? `${this.id}_chips_item_${this.focusedIndex}` : null;
     }
 
-    private get isValueMaxLimited(): boolean {
+    get isMaxedOut(): boolean {
         return this.max && this.value && this.max === this.value.length;
     }
 
@@ -459,7 +459,7 @@ export class Chips implements AfterContentInit, ControlValueAccessor {
         this.value = this.value || [];
 
         if (item && item.trim().length) {
-            if ((this.allowDuplicate || this.value.indexOf(item) === -1) && !this.isValueMaxLimited) {
+            if ((this.allowDuplicate || this.value.indexOf(item) === -1) && !this.isMaxedOut) {
                 this.value = [...this.value, item];
                 this.onModelChange(this.value);
                 this.onAdd.emit({
@@ -500,7 +500,7 @@ export class Chips implements AfterContentInit, ControlValueAccessor {
                 break;
 
             case 'Enter':
-                if (inputValue && inputValue.trim().length && !this.maxedOut()) {
+                if (inputValue && inputValue.trim().length && !this.isMaxedOut) {
                     this.addItem(event, inputValue, true);
                 }
 
@@ -530,7 +530,7 @@ export class Chips implements AfterContentInit, ControlValueAccessor {
 
     updateMaxedOut(): void {
         if (this.inputViewChild && this.inputViewChild.nativeElement) {
-            if (this.isValueMaxLimited) {
+            if (this.isMaxedOut) {
                 // Calling `blur` is necessary because firefox does not call `onfocus` events
                 // for disabled inputs, unlike chromium browsers.
                 this.inputViewChild.nativeElement.blur();
@@ -544,10 +544,6 @@ export class Chips implements AfterContentInit, ControlValueAccessor {
             }
         }
     }
-
-    maxedOut(): boolean {
-        return this.max && this.value && this.max === this.value.length;
-    }
 }
 
 @NgModule({

diff --git a/src/app/components/dropdown/dropdown.ts b/src/app/components/dropdown/dropdown.ts
@@ -146,7 +146,7 @@ export class DropdownItem {
                 (blur)="onInputBlur($event)"
                 (keydown)="onKeyDown($event)"
             >
-                <ng-container *ngIf="!selectedItemTemplate; else defaultPlaceholder">{{ label() === 'p-emptylabel' ? '&nbsp;' : label() || 'empty' }}</ng-container>
+                <ng-container *ngIf="!selectedItemTemplate; else defaultPlaceholder">{{ label() === 'p-emptylabel' ? '&nbsp;' : label() }}</ng-container>
                 <ng-container *ngTemplateOutlet="selectedItemTemplate; context: { $implicit: modelValue() }"></ng-container>
                 <ng-template #defaultPlaceholder>
                     <span *ngIf="label() === placeholder || (label() && !placeholder)">{{ label() === 'p-emptylabel' ? '&nbsp;' : placeholder }}</span>
@@ -916,9 +916,9 @@ export class Dropdown implements OnInit, AfterViewInit, AfterContentInit, AfterV
     });
 
     label = computed(() => {
-        let selectedOptionIndex;
-        this.autoDisplayFirst ? (!this.modelValue() ? (selectedOptionIndex = -1) : (selectedOptionIndex = this.findFirstOptionIndex())) : (selectedOptionIndex = this.findSelectedOptionIndex());
-        return this.modelValue() ? this.getOptionLabel(this.modelValue()) : selectedOptionIndex !== -1 ? this.getOptionLabel(this.visibleOptions()[selectedOptionIndex]) : this.placeholder || 'p-emptylabel';
+        const selectedOptionIndex = this.findSelectedOptionIndex();
+
+        return selectedOptionIndex !== -1 ? this.getOptionLabel(this.visibleOptions()[selectedOptionIndex]) : this.placeholder || 'p-emptylabel';
     });
 
     constructor(public el: ElementRef, public renderer: Renderer2, public cd: ChangeDetectorRef, public zone: NgZone, public filterService: FilterService, public config: PrimeNGConfig) {
@@ -1051,6 +1051,7 @@ export class Dropdown implements OnInit, AfterViewInit, AfterContentInit, AfterV
         this.updateModel(value, event);
         this.focusedOptionIndex.set(this.findSelectedOptionIndex());
         isHide && this.hide(true);
+        this.onChange.emit({originalEvent: event, value: value})
     }
 
     onOptionMouseEnter(event, index) {
@@ -1062,16 +1063,21 @@ export class Dropdown implements OnInit, AfterViewInit, AfterContentInit, AfterV
     updateModel(value, event?) {
         this.value = value;
         this.onModelChange(value);
-        if (this.value !== this.modelValue()) {
-            this.onChange.emit({
-                originalEvent: event,
-                value: value
-            });
-        }
         this.modelValue.set(value);
         this.selectedOptionUpdated = true;
     }
 
+    writeValue(value: any): void {
+        if (this.filter) {
+            this.resetFilter();
+        }
+        this.value = value;
+        this.onModelChange(value);
+        this.modelValue.set(this.value)
+        this.updateEditableLabel();
+        this.cd.markForCheck();
+    }
+
     isSelected(option) {
         return this.isValidOption(option) && ObjectUtils.equals(this.modelValue(), this.getOptionValue(option), this.equalityKey());
     }
@@ -1093,7 +1099,7 @@ export class Dropdown implements OnInit, AfterViewInit, AfterContentInit, AfterV
     }
 
     getOptionLabel(option: any) {
-        return this.optionLabel ? ObjectUtils.resolveFieldData(option, this.optionLabel) : option && option.label !== undefined ? option.label : option;
+        return this.optionLabel ? ObjectUtils.resolveFieldData(option, this.optionLabel) : option && option?.label !== undefined ? option.label : option;
     }
 
     getOptionValue(option: any) {
@@ -1127,16 +1133,6 @@ export class Dropdown implements OnInit, AfterViewInit, AfterContentInit, AfterV
         return this.visibleOptions().filter((option) => !this.isOptionGroup(option)).length;
     }
 
-    writeValue(value: any): void {
-        if (this.filter) {
-            this.resetFilter();
-        }
-        this.value = value;
-        this.updateModel(this.value);
-        this.updateEditableLabel();
-        this.cd.markForCheck();
-    }
-
     /**
      * Callback to invoke on filter reset.
      * @group Method
@@ -1190,6 +1186,7 @@ export class Dropdown implements OnInit, AfterViewInit, AfterContentInit, AfterV
 
         this.onModelChange(value);
         this.updateModel(value, event);
+        this.onChange.emit({originalEvent: event, value: value})
     }
     /**
      * Displays the panel.
@@ -1221,7 +1218,7 @@ export class Dropdown implements OnInit, AfterViewInit, AfterContentInit, AfterV
                     let selectedListItem = DomHandler.findSingle(this.itemsWrapper, '.p-dropdown-item.p-highlight');
 
                     if (selectedListItem) {
-                        selectedListItem.scrollIntoView({ block: 'nearest', inline: 'center' });
+                        selectedListItem.scrollIntoView({ block: 'nearest', inline: 'nearest' });
                     }
                 }
             }
@@ -1616,7 +1613,7 @@ export class Dropdown implements OnInit, AfterViewInit, AfterContentInit, AfterV
     }
 
     onFirstHiddenFocus(event) {
-        const focusableEl = event.relatedTarget === this.focusInputViewChild.nativeElement ? DomHandler.getFirstFocusableElement(this.overlayViewChild.el.nativeElement, ':not(.p-hidden-focusable)') : this.focusInputViewChild.nativeElement;
+        const focusableEl = event.relatedTarget === this.focusInputViewChild?.nativeElement ? DomHandler.getFirstFocusableElement(this.overlayViewChild.el.nativeElement, ':not(.p-hidden-focusable)') : this.focusInputViewChild.nativeElement;
         DomHandler.focus(focusableEl);
     }
 
@@ -1716,6 +1713,7 @@ export class Dropdown implements OnInit, AfterViewInit, AfterContentInit, AfterV
     clear(event: Event) {
         this.updateModel(null, event);
         this.updateEditableLabel();
+        this.onChange.emit({originalEvent: event, value: this.value})
         this.onClear.emit(event);
     }
 }

diff --git a/src/app/components/megamenu/megamenu.ts b/src/app/components/megamenu/megamenu.ts
@@ -621,9 +621,7 @@ export class MegaMenu implements AfterContentInit, OnDestroy, OnInit {
 
     onItemMouseEnter(event: any) {
         if (!DomHandler.isTouchDevice()) {
-            if (this.dirty) {
-                this.onItemChange(event);
-            }
+            this.onItemChange(event);
         }
     }
 

diff --git a/src/app/components/menubar/menubar.ts b/src/app/components/menubar/menubar.ts
@@ -662,7 +662,7 @@ export class Menubar implements AfterContentInit, OnDestroy, OnInit {
 
     onItemMouseEnter(event: any) {
         if (!DomHandler.isTouchDevice()) {
-            if (!this.mobileActive && this.dirty) {
+            if (!this.mobileActive) {
                 this.onItemChange(event);
             }
         }

diff --git a/src/app/components/multiselect/multiselect.ts b/src/app/components/multiselect/multiselect.ts
@@ -317,13 +317,13 @@ export class MultiSelectItem {
                             <ng-template #buildInItems let-items let-scrollerOptions="options">
                                 <ul #items class="p-multiselect-items p-component" [ngClass]="scrollerOptions.contentStyleClass" [style]="scrollerOptions.contentStyle" role="listbox" aria-multiselectable="true">
                                     <ng-template ngFor let-option [ngForOf]="items" let-i="index">
-                                        <ng-container *ngIf="option.group">
+                                        <ng-container *ngIf="isOptionGroup(option)">
                                             <li [attr.id]="id + '_' + getOptionIndex(i, scrollerOptions)" class="p-multiselect-item-group" [ngStyle]="{ height: scrollerOptions.itemSize + 'px' }" role="option">
                                                 <span *ngIf="!groupTemplate">{{ getOptionGroupLabel(option.optionGroup) }}</span>
                                                 <ng-container *ngTemplateOutlet="groupTemplate; context: { $implicit: option.optionGroup }"></ng-container>
                                             </li>
                                         </ng-container>
-                                        <ng-container *ngIf="!option.group">
+                                        <ng-container *ngIf="!isOptionGroup(option)">
                                             <p-multiSelectItem
                                                 [id]="id + '_' + getOptionIndex(i, scrollerOptions)"
                                                 [option]="option"
@@ -1175,11 +1175,6 @@ export class MultiSelect implements OnInit, AfterViewInit, AfterContentInit, Aft
         this.value = value;
         this.onModelChange(value);
         this.modelValue.set(value);
-
-        this.onChange.emit({
-            originalEvent: event,
-            value: value
-        });
     }
 
     onOptionSelect(event, isFocus = false, index = -1) {
@@ -1201,6 +1196,12 @@ export class MultiSelect implements OnInit, AfterViewInit, AfterContentInit, Aft
         index !== -1 && this.focusedOptionIndex.set(index);
 
         isFocus && DomHandler.focus(this.focusInputViewChild?.nativeElement);
+
+        this.onChange.emit({
+            originalEvent: event,
+            value: value,
+            itemValue: option
+        });
     }
 
     onOptionSelectRange(event, start = -1, end = -1) {
@@ -1487,6 +1488,7 @@ export class MultiSelect implements OnInit, AfterViewInit, AfterContentInit, Aft
         this.changeFocusedOptionIndex(event, optionIndex);
         !this.overlayVisible && this.show();
         event.preventDefault();
+        event.stopPropagation();
     }
 
     onArrowUpKey(event, pressedInInputText = false) {
@@ -1509,6 +1511,7 @@ export class MultiSelect implements OnInit, AfterViewInit, AfterContentInit, Aft
             !this.overlayVisible && this.show();
             event.preventDefault();
         }
+        event.stopPropagation();
     }
 
     onHomeKey(event, pressedInInputText = false) {
@@ -1774,9 +1777,8 @@ export class MultiSelect implements OnInit, AfterViewInit, AfterContentInit, Aft
     writeValue(value: any): void {
         this.value = value;
         this.modelValue.set(this.value);
-        this.updateModel(this.value);
+        this.onModelChange(this.value)
         this.checkSelectionLimit();
-
         this.cd.markForCheck();
     }
 

diff --git a/src/app/components/tooltip/tooltip.ts b/src/app/components/tooltip/tooltip.ts
@@ -297,7 +297,10 @@ export class Tooltip implements AfterViewInit, OnDestroy {
 
     onMouseLeave(e: MouseEvent) {
         if (!this.isAutoHide()) {
-            const valid = DomHandler.hasClass(e.target, 'p-tooltip') || DomHandler.hasClass(e.target, 'p-tooltip-arrow') || DomHandler.hasClass(e.target, 'p-tooltip-text') || DomHandler.hasClass(e.relatedTarget, 'p-tooltip');
+            const valid =
+                DomHandler.hasClass(e.relatedTarget, 'p-tooltip') ||
+                DomHandler.hasClass(e.relatedTarget, 'p-tooltip-text') ||
+                DomHandler.hasClass(e.relatedTarget, 'p-tooltip-arrow');
             !valid && this.deactivate();
         } else {
             this.deactivate();

diff --git a/src/app/showcase/doc/chips/chipsdoc.module.ts b/src/app/showcase/doc/chips/chipsdoc.module.ts
@@ -12,10 +12,11 @@ import { ReactiveFormsDoc } from './reactiveformsdoc';
 import { RegexpSeperatorDoc } from './regexpseperator.doc';
 import { StyleDoc } from './styledoc';
 import { TemplateDoc } from './templatedoc';
+import { MaxValuesDoc } from './maxvaluesdoc';
 
 @NgModule({
     imports: [CommonModule, ChipsModule, FormsModule, ReactiveFormsModule, AppCodeModule, AppDocModule],
     exports: [AppDocModule],
-    declarations: [ImportDoc, BasicDoc, CommaSeperatorDoc, RegexpSeperatorDoc, TemplateDoc, StyleDoc, AccessibilityDoc, ReactiveFormsDoc]
+    declarations: [ImportDoc, BasicDoc, CommaSeperatorDoc, RegexpSeperatorDoc, TemplateDoc, StyleDoc, AccessibilityDoc, ReactiveFormsDoc, MaxValuesDoc]
 })
 export class ChipsDocModule {}
diff --git a/src/app/showcase/doc/chips/maxvaluesdoc.ts b/src/app/showcase/doc/chips/maxvaluesdoc.ts
@@ -0,0 +1,46 @@
+import { Component, Input } from '@angular/core';
+import { FormControl } from '@angular/forms';
+import { Code } from '../../domain/code';
+
+@Component({
+    selector: 'max-values-doc',
+    template: ` <section class="py-4">
+        <app-docsectiontext [title]="title" [id]="id">
+            <p>Chips can have a maximum number of entered items. To set this limit, the <i>max</i> property is used, which accepts a numeric value that represents the maximum number of items in the chip list</p>
+        </app-docsectiontext>
+        <div class="card p-fluid">
+            <p-chips [formControl]="values" [max]="2" placeholder="Maximum 2 items"></p-chips>
+        </div>
+        <app-code [code]="code" selector="chips-max-values-demo"></app-code>
+    </section>`
+})
+export class MaxValuesDoc {
+    @Input() id: string;
+
+    @Input() title: string;
+
+    values = new FormControl<string[] | null>(null);
+
+    code: Code = {
+        basic: `<p-chips [formControl]="values" [max]="max" placeholder="Maximum 2 items" ></p-chips>`,
+
+        html: `
+<div class="card p-fluid">
+    <p-chips [formControl]="values" [max]="max" placeholder="Maximum 2 items"></p-chips>  
+</div>`,
+
+        typescript: `
+import { Component, OnInit } from '@angular/core';
+import { FormControl, FormGroup } from '@angular/forms';
+
+@Component({
+    selector: 'chips-max-values-demo',
+    templateUrl: './chips-max-values-demo.html',
+    styleUrls: ['./chips-max-values-demo.scss']
+})
+export class ChipsMaxValuesDemo {
+    values = new FormControl<string[] | null>(null);
+    max = 2;
+}`
+    };
+}