Bug #15208 - Autocomplete: Down/Up arrows trigger (onSelect) event when [autoHighlight]="true"

api-generator/build-apidoc.ts

@@ -94,10 +94,8 @@ async function main() {
                                             readonly: prop.flags.isReadonly,
                                             type: prop.getSignature && prop.getSignature.type ? prop.getSignature.type.toString() : prop.type ? prop.type.toString() : null,
                                             default: prop.type && prop.type.name === 'boolean' && !prop.defaultValue ? 'false' : prop.defaultValue ? prop.defaultValue.replace(/^'|'$/g, '') : undefined,
-                                            description: ((prop.getSignature?.comment?.summary || prop.setSignature?.comment?.summary) || prop.comment?.summary)?.map((s) => s.text || '').join(' '),
-                                            deprecated: getDeprecatedText(prop.getSignature)
-                                                || getDeprecatedText(prop.setSignature)
-                                                || getDeprecatedText(prop)
+                                            description: (prop.getSignature?.comment?.summary || prop.setSignature?.comment?.summary || prop.comment?.summary)?.map((s) => s.text || '').join(' '),
+                                            deprecated: getDeprecatedText(prop.getSignature) || getDeprecatedText(prop.setSignature) || getDeprecatedText(prop)
                                         });
                                     });
                                     doc[name]['components'][componentName]['props'] = props;

src/app/components/autocomplete/autocomplete.ts

@@ -1497,7 +1497,7 @@ export class AutoComplete implements AfterViewChecked, AfterContentInit, OnDestr
             this.focusedOptionIndex.set(index);
             this.scrollInView();
 
-            if (this.selectOnFocus || this.autoHighlight) {
+            if (this.selectOnFocus) {
                 this.onOptionSelect(event, this.visibleOptions()[index], false);
             }
         }

src/app/components/calendar/calendar.spec.ts

@@ -1903,7 +1903,7 @@ describe('Calendar', () => {
     });
 
     it('should allow changing time when min and max date times are within the hour', () => {
-        const event = { preventDefault: () => { } };
+        const event = { preventDefault: () => {} };
         const now = new Date('2023-01-01T12:14:00.000Z'); // 1 minute before max date
         const minDate = new Date('2023-01-01T11:45:00.000Z'); // quarter to now date hour
         const maxDate = new Date('2023-01-01T12:15:01.000Z'); // quarter past now date hour, 1 minute and 1 second after now date
@@ -1940,5 +1940,5 @@ describe('Calendar', () => {
         calendar.incrementHour(event);
         calendar.updateTime();
         expect((calendar.value as Date).toISOString()).toBe(maxDateISO);
-    })
+    });
 });

src/app/components/calendar/calendar.ts

@@ -2499,7 +2499,7 @@ export class Calendar implements OnInit, OnDestroy, ControlValueAccessor {
     };
 
     constrainTime(hour: number, minute: number, second: number, pm: boolean) {
-        let returnTimeTriple: number[] = [ hour, minute, second ]
+        let returnTimeTriple: number[] = [hour, minute, second];
         let value = this.value;
         const convertedHour = this.convertTo24Hour(hour, pm);
         const isRange = this.isRangeSelection(),
@@ -2520,7 +2520,9 @@ export class Calendar implements OnInit, OnDestroy, ControlValueAccessor {
         const valueDateString = value ? value.toDateString() : null;
         let isMinDate = this.minDate && valueDateString && this.minDate.toDateString() === valueDateString;
         let isMaxDate = this.maxDate && valueDateString && this.maxDate.toDateString() === valueDateString;
-        switch (true) { // intentional fall through
+        switch (
+            true // intentional fall through
+        ) {
             case isMinDate && this.minDate.getHours() > convertedHour:
                 returnTimeTriple[0] = this.minDate.getHours();
             case isMinDate && this.minDate.getHours() === convertedHour && this.minDate.getMinutes() > minute:
@@ -2543,16 +2545,15 @@ export class Calendar implements OnInit, OnDestroy, ControlValueAccessor {
         const prevHour = this.currentHour ?? 0;
         let newHour = (this.currentHour ?? 0) + this.stepHour;
         let newPM = this.pm;
-        if (this.hourFormat == '24')
-            newHour = newHour >= 24 ? newHour - 24 : newHour;
+        if (this.hourFormat == '24') newHour = newHour >= 24 ? newHour - 24 : newHour;
         else if (this.hourFormat == '12') {
             // Before the AM/PM break, now after
             if (prevHour < 12 && newHour > 11) {
                 newPM = !this.pm;
             }
             newHour = newHour >= 13 ? newHour - 12 : newHour;
         }
-        [ this.currentHour, this.currentMinute, this.currentSecond ] = this.constrainTime(newHour, this.currentMinute!, this.currentSecond!, newPM!);
+        [this.currentHour, this.currentMinute, this.currentSecond] = this.constrainTime(newHour, this.currentMinute!, this.currentSecond!, newPM!);
         this.pm = newPM;
         event.preventDefault();
     }
@@ -2615,47 +2616,46 @@ export class Calendar implements OnInit, OnDestroy, ControlValueAccessor {
     }
 
     decrementHour(event: any) {
-        let newHour = ( this.currentHour ?? 0 ) - this.stepHour;
+        let newHour = (this.currentHour ?? 0) - this.stepHour;
         let newPM = this.pm;
-        if (this.hourFormat == '24')
-            newHour = newHour < 0 ? 24 + newHour : newHour;
+        if (this.hourFormat == '24') newHour = newHour < 0 ? 24 + newHour : newHour;
         else if (this.hourFormat == '12') {
             // If we were at noon/midnight, then switch
             if (this.currentHour === 12) {
                 newPM = !this.pm;
             }
             newHour = newHour <= 0 ? 12 + newHour : newHour;
         }
-        [ this.currentHour, this.currentMinute, this.currentSecond ] = this.constrainTime(newHour, this.currentMinute!, this.currentSecond!, newPM!);
+        [this.currentHour, this.currentMinute, this.currentSecond] = this.constrainTime(newHour, this.currentMinute!, this.currentSecond!, newPM!);
         this.pm = newPM;
         event.preventDefault();
     }
 
     incrementMinute(event: any) {
-        let newMinute = ( this.currentMinute ?? 0 ) + this.stepMinute;
+        let newMinute = (this.currentMinute ?? 0) + this.stepMinute;
         newMinute = newMinute > 59 ? newMinute - 60 : newMinute;
-        [ this.currentHour, this.currentMinute, this.currentSecond ] = this.constrainTime(this.currentHour, newMinute, this.currentSecond!, this.pm!);
+        [this.currentHour, this.currentMinute, this.currentSecond] = this.constrainTime(this.currentHour, newMinute, this.currentSecond!, this.pm!);
         event.preventDefault();
     }
 
     decrementMinute(event: any) {
-        let newMinute = ( this.currentMinute ?? 0 ) - this.stepMinute;
+        let newMinute = (this.currentMinute ?? 0) - this.stepMinute;
         newMinute = newMinute < 0 ? 60 + newMinute : newMinute;
-        [ this.currentHour, this.currentMinute, this.currentSecond ] = this.constrainTime(this.currentHour, newMinute, this.currentSecond, this.pm);
+        [this.currentHour, this.currentMinute, this.currentSecond] = this.constrainTime(this.currentHour, newMinute, this.currentSecond, this.pm);
         event.preventDefault();
     }
 
     incrementSecond(event: any) {
         let newSecond = <any>this.currentSecond + this.stepSecond;
         newSecond = newSecond > 59 ? newSecond - 60 : newSecond;
-        [ this.currentHour, this.currentMinute, this.currentSecond ] = this.constrainTime(this.currentHour, this.currentMinute, newSecond, this.pm);
+        [this.currentHour, this.currentMinute, this.currentSecond] = this.constrainTime(this.currentHour, this.currentMinute, newSecond, this.pm);
         event.preventDefault();
     }
 
     decrementSecond(event: any) {
         let newSecond = <any>this.currentSecond - this.stepSecond;
         newSecond = newSecond < 0 ? 60 + newSecond : newSecond;
-        [ this.currentHour, this.currentMinute, this.currentSecond ] = this.constrainTime(this.currentHour, this.currentMinute, newSecond, this.pm);
+        [this.currentHour, this.currentMinute, this.currentSecond] = this.constrainTime(this.currentHour, this.currentMinute, newSecond, this.pm);
         event.preventDefault();
     }
 
@@ -2694,7 +2694,7 @@ export class Calendar implements OnInit, OnDestroy, ControlValueAccessor {
 
     toggleAMPM(event: any) {
         const newPM = !this.pm;
-        [ this.currentHour, this.currentMinute, this.currentSecond ] = this.constrainTime(this.currentHour, this.currentMinute, this.currentSecond, newPM);
+        [this.currentHour, this.currentMinute, this.currentSecond] = this.constrainTime(this.currentHour, this.currentMinute, this.currentSecond, newPM);
         this.pm = newPM;
         this.updateTime();
         event.preventDefault();
@@ -2729,11 +2729,11 @@ export class Calendar implements OnInit, OnDestroy, ControlValueAccessor {
     isValidSelection(value: any): boolean {
         if (this.isSingleSelection()) {
             return this.isSelectable(value.getDate(), value.getMonth(), value.getFullYear(), false);
-        } 
-		let isValid = value.every((v: any) => this.isSelectable(v.getDate(), v.getMonth(), v.getFullYear(), false));
-		if (isValid && this.isRangeSelection()) {
-			isValid = value.length === 1 || (value.length > 1 && value[1] >= value[0]);
-		}
+        }
+        let isValid = value.every((v: any) => this.isSelectable(v.getDate(), v.getMonth(), v.getFullYear(), false));
+        if (isValid && this.isRangeSelection()) {
+            isValid = value.length === 1 || (value.length > 1 && value[1] >= value[0]);
+        }
         return isValid;
     }
 

src/app/components/cascadeselect/cascadeselect.ts

@@ -714,7 +714,7 @@ export class CascadeSelect implements OnInit, AfterContentInit {
     ngOnChanges(changes: SimpleChanges): void {
         if (changes.options) {
             this.processedOptions = this.createProcessedOptions(changes.options.currentValue || []);
-            this.updateModel(null)
+            this.updateModel(null);
         }
     }
 

src/app/components/inputotp/inputotp.ts

@@ -300,7 +300,7 @@ export class InputOtp implements AfterContentInit {
                 break;
         }
     }
-    
+
     onPaste(event) {
         let paste = event.clipboardData.getData('text');
 

src/app/components/treeselect/treeselect.ts

@@ -144,7 +144,7 @@ export const TREESELECT_VALUE_ACCESSOR: any = {
                                 </span>
                             </button>
                         </div>
-                        <div class="p-treeselect-items-wrapper" [ngStyle]="{ 'max-height': scrollHeight }" >
+                        <div class="p-treeselect-items-wrapper" [ngStyle]="{ 'max-height': scrollHeight }">
                             <p-tree
                                 #tree
                                 [value]="options"

src/app/showcase/doc/treeselect/virtualscrolldoc.ts

@@ -4,19 +4,30 @@ import { NodeService } from '../../service/nodeservice';
 
 @Component({
     selector: 'virtual-scroll-doc',
-    template: `
-        <app-docsectiontext>
-            <p>VirtualScrolling is an efficient way of rendering the options by displaying a small subset of data in the viewport at any time. When dealing with huge number of options, it is suggested to enable VirtualScrolling to avoid performance
-                issues. Usage is simple as setting <i>virtualScroll</i> property to true and defining <i>virtualScrollItemSize</i> to specify the height of an item.</p>
+    template: ` <app-docsectiontext>
+            <p>
+                VirtualScrolling is an efficient way of rendering the options by displaying a small subset of data in the viewport at any time. When dealing with huge number of options, it is suggested to enable VirtualScrolling to avoid performance
+                issues. Usage is simple as setting <i>virtualScroll</i> property to true and defining <i>virtualScrollItemSize</i> to specify the height of an item.
+            </p>
         </app-docsectiontext>
         <div class="card flex justify-content-center">
-            <p-treeSelect class="w-full md:w-20rem" containerStyleClass="w-full" [(ngModel)]="selectedNodes" [options]="nodes" display="chip" [metaKeySelection]="false" selectionMode="checkbox" placeholder="Select Item"
-                          [virtualScroll]="true" [virtualScrollItemSize]="46" [virtualScrollOptions]="{ scrollHeight: '200px' }"></p-treeSelect>
+            <p-treeSelect
+                class="w-full md:w-20rem"
+                containerStyleClass="w-full"
+                [(ngModel)]="selectedNodes"
+                [options]="nodes"
+                display="chip"
+                [metaKeySelection]="false"
+                selectionMode="checkbox"
+                placeholder="Select Item"
+                [virtualScroll]="true"
+                [virtualScrollItemSize]="46"
+                [virtualScrollOptions]="{ scrollHeight: '200px' }"
+            ></p-treeSelect>
         </div>
         <app-code [code]="code" selector="tree-select-virtual-scroll-demo"></app-code>`
 })
 export class VirtualScrollDoc {
-
     nodes!: any[];
 
     selectedNodes: any;
@@ -49,6 +60,6 @@ export class TreeSelectVirtualScrollDemo {
     }
 }`,
 
-        service: ['NodeService'],
+        service: ['NodeService']
     };
 }

src/app/showcase/service/nodeservice.ts

@@ -1,5 +1,5 @@
 import { Injectable } from '@angular/core';
-import { TreeNode } from "../../components/api/treenode";
+import { TreeNode } from '../../components/api/treenode';
 
 @Injectable()
 export class NodeService {
@@ -774,15 +774,15 @@ export class NodeService {
                 children.push({
                     key: `${parentIndex}-${childIndex}`,
                     label: `Child ${parentIndex}-${childIndex}`,
-                    selectable: true,
+                    selectable: true
                 });
             }
 
             nodes.push({
                 key: parentIndex.toString(),
                 label: `Parent ${parentIndex}`,
                 selectable: true,
-                children: children,
+                children: children
             });
         }